#465 – Using GridSplitters with Nested Grids
January 4, 2012 Leave a comment
You can use GridSplitter elements in any Grid, including a Grid that’s nested inside another Grid. This allows you to have GridSplitters that split elements within just a portion of the screen, as shown below.
In this example, the main grid has a vertical splitter between left and right sub-grids, each of which has a horizontal splitter between top and bottom panels.
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <!-- Sub-grid on left --> <Grid Grid.Column="0"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Label Content="Left, Row 0" Background="Azure" Grid.Row="0"/> <Label Content="Left, Row 2" Background="Lavender" Grid.Row="2"/> <GridSplitter Grid.Row="1" Height="8" Background="DarkSlateBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center"/> </Grid> <!-- Sub-grid on right --> <Grid Grid.Column="2"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Label Content="Right, Row 0" Background="Moccasin" Grid.Row="0"/> <Label Content="Right, Row 2" Background="Honeydew" Grid.Row="2"/> <GridSplitter Grid.Row="1" Height="8" Background="DarkSlateBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center"/> </Grid> <!-- Splitter between left/right sub-grids --> <GridSplitter Grid.Column ="1" Width="8" Background="DarkSlateBlue" VerticalAlignment="Stretch" HorizontalAlignment="Center"/> </Grid>