#459 – Using Two (or More) GridSplitter Elements in the Same Grid

You can include more than one GridSplitter in a Grid by setting up the properties for each GridSplitter properly.

In the example below, we have both a vertical and a horizontal GridSplitter.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Content="Row 0 Col 0" Background="Azure" Grid.Row="0" Grid.Column="0" />
        <Label Content="Row 0 Col 2" Background="Lavender" Grid.Row="0" Grid.Column="2" />
        <Label Content="Row 2 Col 0" Background="Moccasin" Grid.Row="2" Grid.Column="0" />
        <Label Content="Row 2 Col 2" Background="Honeydew" Grid.Row="2" Grid.Column="2" />

        <GridSplitter Grid.Row="1" Grid.ColumnSpan="3" Height="3" Background="Blue"
                      VerticalAlignment="Center" HorizontalAlignment="Stretch" />

        <GridSplitter Grid.Column="1" Grid.RowSpan="3" Width="3" Background="Green"
                      VerticalAlignment="Stretch" HorizontalAlignment="Center" />
    </Grid>