wpf Syncing rows or columns of multiple Grids


Example

The row heigths or column widths of multiple Grids can be synchronized by setting a common SharedSizeGroup on the rows or columns to synchronize. Then a parent control somewhere up in the tree above the Grids needs to have the attached property Grid.IsSharedSizeScope set to True.

<StackPanel Grid.IsSharedSizeScope="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="MyGroup"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        [...]
    </Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="MyGroup"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        [...]
    </Grid>
</StackPanel>

In this example the first column of both Grids will always have the same width, also when one of them is resized by its content.