How to create a horizontal gridsplitter within a sizable column

Question

I'm trying to create a sizable column that contains also horizontal gridsplitter.

The code is XAML for WPF:

<DockPanel Name="dockPanel1" LastChildFill="True" >
    <Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
    </Grid>

    <Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
    </Grid>

    <Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext"
              Width="2" Background="#FFBCBCBC"/>

        <DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
            <Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <GridSplitter HorizontalAlignment="Stretch"
                              Grid.Row="1" Grid.ColumnSpan="1" ResizeBehavior="PreviousAndNext"
                              Width="5" Background="#FFBCBCBC"/>

                <Label Content="D2Row0" Grid.Row="0" />
                <!-- separator at Row1 -->
                <Label Content="D2Row2" Grid.Row="2" />
            </Grid>

        </DockPanel>

    </Grid>


</DockPanel>

I can create one of them separate. But I want both. To make more grids in a form, I use the dockpanel. Maybe this isn't necessary, but if I don't it generates errors. Where do I go wrong? Anyone has a clue?

Answer 1

Try this :

 <DockPanel Name="dockPanel1" LastChildFill="True" >
    <Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
    </Grid>

    <Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
    </Grid>

    <Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1" ResizeBehavior="PreviousAndNext"
          Width="2" Background="#FFBCBCBC"/>

        <DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
            <Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FFBCBCBC" Height="2"/>

                <Label Content="D2Row0" Grid.Row="0" />
                <!-- separator at Row1 -->
                <Label Content="D2Row2" Grid.Row="2" />
            </Grid>

        </DockPanel>

    </Grid>


</DockPanel>