Grid Splitter problem in WPF

Question

I want a layout like VS 2008. In which I want two columns and second columns is again split into two.

I done that in the xaml mentioned below, but the GridSplitter

Answer 1

Your gridsplitter is behind the other controls that's why you can't see it. You can either move it to the bottom in your XAML file (so it is added last) or use the Panel.ZIndex attached property. Additionally you have to set the width for the splitter correctly correctly:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
           TextWrapping="Wrap">Left Hand Side</TextBlock>
    </StackPanel>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Background="Red">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
        <GridSplitter Grid.Row="1" Height="5" Background="Gray"
              VerticalAlignment="Top" HorizontalAlignment="Stretch" />
        <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
    </Grid>
    <GridSplitter Grid.Column="0" ResizeDirection="Columns" 
            Grid.RowSpan="1" Width="5"
            HorizontalAlignment="Right"/>
</Grid>

Answer 2

The GridSplitters should probably be on their own row/column in the grid, not sharing a cell with the other controls.

Answer 3

I have acheived the functionality, the XAML is mentioned below:

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

    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
               TextWrapping="Wrap">Left Hand Side</TextBlock>


    </StackPanel>


    <GridSplitter HorizontalAlignment="Right" ResizeDirection="Columns"  Width="5" />

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>            
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>




    <ListBox Grid.Row="0" Background="Red">
        <ListBoxItem>Hello</ListBoxItem>
        <ListBoxItem>World</ListBoxItem>
    </ListBox>
    <GridSplitter Grid.Row="1" Height="5" Background="Gray"
                  VerticalAlignment="Top" HorizontalAlignment="Stretch" />
    <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
        <ListBoxItem>Hello</ListBoxItem>
        <ListBoxItem>World</ListBoxItem>
    </ListBox>
        </Grid>
</Grid>

Answer 4

Change your vertical Splitter to

<GridSplitter Grid.Column="0" Width="5" ResizeDirection="Auto" 
            Grid.RowSpan="1" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Stretch"/>

This will be much better way to use GridSplitter

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

    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
           TextWrapping="Wrap">Left Hand Side</TextBlock>


    </StackPanel>

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>

    <Grid Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Background="Red">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
        <GridSplitter Grid.Row="1" Background="Gray" HorizontalAlignment="Stretch"/>
        <ListBox Grid.Row="2" Background="Violet">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
    </Grid>
</Grid>