WPF GridSpliter Movement to both sides for sub-grids

Question

I'm creating a grid to hold 4 displayes.

I started with grid that is divided to 2 grids (Top/Bottom) with GridSplitter. This part worked fine - I can change the height of noth top and buttom grids. Now I splited each of them to two more grids - Left and right, again seperated by Grid spliter.

These GridSpliters can only change size to the right but the left widht is kept constant(the initial width)

How do I fix it?

Heres the xaml code:

  <Grid Background="#DDDDFF">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="5"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch"></GridSplitter>
    <Grid x:Name="TopDisplaysGrid" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="1" Width="5" VerticalAlignment="Stretch"></GridSplitter>
        <Grid x:Name="TopLeftDisplayGrid" Grid.Column="0"></Grid>
        <Grid x:Name="TopRightDisplayGrid" Grid.Column="2"></Grid>
    </Grid>
    <Grid x:Name="BottomDisplaysGrid" Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="1" Width="5" VerticalAlignment="Stretch"></GridSplitter>
        <Grid x:Name="BottomLeftDisplayGrid" Grid.Column="0"></Grid>
        <Grid x:Name="BottomRightDisplayGrid" Grid.Column="2"></Grid>
    </Grid>
</Grid>

Answer 1

Change the two inner GridSplitters' Resize behavior: ResizeBehavior="PreviousAndNext". It will help, I think. Check this out: GridResizeBehavior