Live Chat Icon For mobile
Live Chat Icon

How can I automatically layout Grids Using the IsSharedSizeScope Property ?

Platform: WPF| Category: Globalization Struc

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'/>

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.