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

How can I replace the style of a DocumentViewer ?

This can be done with the following code snippets, Define the required styles in the App.xaml file. [XAML] <Style x:Key=”MyDVStyleExtend1″ BasedOn=”{StaticResource {x:Type DocumentViewer}}” TargetType=”{x:Type DocumentViewer}”> <Setter Property=”Background”> <Setter.Value> <LinearGradientBrush StartPoint=”0.5,0″ EndPoint=”0.5,1″> <GradientStop Offset=”0.0″ Color=”Red” /> <GradientStop Offset=”1.0″ Color=”White” /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> <Style x:Key=”MyDVStyleExtend2″ BasedOn=”{StaticResource {x:Type DocumentViewer}}” TargetType=”{x:Type DocumentViewer}”> <Setter Property=”Background”> <Setter.Value> <LinearGradientBrush StartPoint=”0.5,0″ EndPoint=”0.5,1″> <GradientStop Offset=”0.0″ Color=”Blue” /> <GradientStop Offset=”1.0″ Color=”White” /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> Define the DocumentViewer in MainWindow. [XAML] <Grid> <DocumentViewer Name=”MyDocumentViewer”/> <Button Content=”Style1″ Height=”30″ Width=”100″ Click=”Button1_Click” /> <Button Content=”Style2″ Height=”30″ Width=”100″ Click=”Button2_Click” /> </Grid> Replace the styles for document viewer based on button clicks from main window. [C#] private void Button1_Click(object sender, RoutedEventArgs e) { MyDocumentViewer.Style = (Style)Application.Current.Resources[‘MyDVStyleExtend1’]; } private void Button2_Click(object sender, RoutedEventArgs e) { MyDocumentViewer.Style = (Style)Application.Current.Resources[‘MyDVStyleExtend2’]; }