How can I automatically layout Grids Using the IsSharedSizeScope Property ?

Grids are useful in localizable applications to create controls that adjust to fit content. In the below example, the Grid element’s ‘IsSharedSizeScope’ attached property is useful for sharing the same sizing among multiple grid elements.

[XAML]

<StackPanel Orientation='Horizontal' DockPanel.Dock='Top'>  
    <Button Click='setTrue' Margin='0,0,10,10'>Set IsSharedSizeScope='True'</Button>
    <Button Click='setFalse' Margin='0,0,10,10'>Set IsSharedSizeScope='False'</Button>
</StackPanel> 

<StackPanel Orientation='Horizontal' DockPanel.Dock='Top'>

<Grid ShowGridLines='True' Margin='0,0,10,0'>
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup='FirstColumn'/>
    <ColumnDefinition SharedSizeGroup='SecondColumn'/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height='Auto' SharedSizeGroup='FirstRow'/>
  </Grid.RowDefinitions>

    <Rectangle Fill='Silver' Grid.Column='0' Grid.Row='0' Width='200' Height='100'/>
    <Rectangle Fill='Blue' Grid.Column='1' Grid.Row='0' Width='150' Height='100'/>

    <TextBlock Grid.Column='0' Grid.Row='0' FontWeight='Bold'>First Column</TextBlock>
    <TextBlock Grid.Column='1' Grid.Row='0' FontWeight='Bold'>Second Column</TextBlock>
</Grid>

<Grid ShowGridLines='True'>
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup='FirstColumn'/>
    <ColumnDefinition SharedSizeGroup='SecondColumn'/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>        
    <RowDefinition Height='Auto' SharedSizeGroup='FirstRow'/>
  </Grid.RowDefinitions>

    <Rectangle Fill='Silver' Grid.Column='0' Grid.Row='0'/>
    <Rectangle Fill='Blue' Grid.Column='1' Grid.Row='0'/>

    <TextBlock Grid.Column='0' Grid.Row='0' FontWeight='Bold'>First Column</TextBlock>
    <TextBlock Grid.Column='1' Grid.Row='0' FontWeight='Bold'>Second Column</TextBlock>
</Grid>

</StackPanel>

<TextBlock Margin='10' DockPanel.Dock='Top' Name='txt1'/>