Double Grid Splitter

Question

I tried to implement a GridSplitter to my WPF Window - like shown here http://www.wpf-tutorial.com/panels/gridsplitter/

Worked just well. But I wanna do a double grid splitter. So the window should be splitted in a left and a right part. And the right part should be splitted in a top and a button part.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid></Grid>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="5" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">One</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Two</TextBlock>
    </Grid>
</Grid>

Buuut it alawys splits up the left part in two pieces. I tried like everything setting the Grid.Row and Grid.column for everything explicit - but nothing. What am I missing?

Szabolcs Dézsi Szabolcs Dézsi · Accepted Answer · 2016-02-16T21:07:54

To achieve what you would like:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left</TextBlock>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
    <Grid Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Grid>

You didn't set Grid.Column="2" on the the second Grid you intended to be on the right.

I also changed the Width and Height properties to * so the horizontal and vertical GridSplitters will sit in the center.

Double Grid Splitter

1 Answers