WPF Grid Shared Size Groups

WPF Grid Shared Size Groups

The Grid rows and columns are given a direct size by the developer or are automatically sized by their content’s size. By using shared sized group feature you may also set the size of the rows or columns by the size of a different row/column at the current grid or from a different grid available in the page.

For example, you may set the column width of column 2 by the column width of column one at the same grid. You may also set the column width of column 2 at grid 2 by column 1 at grid 1.

Normal Grid:

column 2 width set by column 1 width of the same grid:

Column 2 width at grid 2 is set by column 1 width of grid 1:

You may reuse the shared size group in multiple columns or rows at multiple grids.
Please pay attention to the fact that the share size group is set both ways, that means that the size of all shared column (or rows) is set by the largest column (or row).

Sharing a group can be done by simply setting the ColumnDefinition’s SharedSizeGroup property to a specific name that will be also used at the other’s column’s definition.

<Grid Grid.Row="0"Background="AliceBlue"  ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"SharedSizeGroup="ShareThis"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

….

<Grid Grid.Row="2" Background="AntiqueWhite"  ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="ShareThis"></ColumnDefinition>
        <ColumnDefinition Width="Auto" ></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

One last thing to do is to set the scope of the shared size group in the current window, this can be done by setting Grid.IsSharedSizeScope property to true at a container whose scope encompasses the shared columns/rows.

<Grid Grid.IsSharedSizeScope="True" >

You can view a sample code here.