CODEWITHSUNDEEP
wpfxamlgridviewbox
Waqas Shabbir
Waqas Shabbir

Reputation: 753

How to make contents having equal space (width & hight) to resize upon changing of window size in XAML?

I have the following code of XAML in WPF. This generates the grid with equal size of columns & rows (as shown in figure 1.)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
     </Grid.ColumnDefinitions>

     <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
     <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
     <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
     <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>
</Grid>

Figure 1.

Figure 1.

But when I put this grid in a viewbox (like the code below), the rows & column remains no more equally in size (as shown in figure 2.).

<Viewbox  Stretch="Uniform">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
        <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
        <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
        <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>

    </Grid>
</Viewbox>

Figure 2.

Figure 2.

How can I make this grid with equal size of rows & column inside a viewbox?

Upvotes: 1

Views: 190

Answers (3)

Patrick Graham
Patrick Graham

Reputation: 992

Instead of using a Grid try using a UniformGrid:

<Viewbox  Stretch="Uniform">
    <UniformGrid Rows="4" Columns="4">
        <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
        <TextBlock />
        <TextBlock />
        <TextBlock />

        <TextBlock />
        <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
        <TextBlock />
        <TextBlock />

        <TextBlock />
        <TextBlock />
        <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
        <TextBlock />

        <TextBlock />
        <TextBlock />
        <TextBlock />
        <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>
        </UniformGrid>
</Viewbox>

Just make sure you set Rows And Columns, and instead of saying which row/column each child element is, you just enter them in order.

Upvotes: 1

brunnerh
brunnerh

Reputation: 184496

You can enforce size-sharing like this:

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
    </Grid.ColumnDefinitions>

Upvotes: 2

Muds
Muds

Reputation: 4116

That's the behavior of ViewBox

Taken from internet

The ViewBox is a very useful control in WPF. If does nothing more than scale to fit the content to the available size. It does not resize the content, but it transforms it.

why use viewbox when you don't want this, try another control.

Upvotes: 2

Related Questions