Multiple Parallel GridSplitter in WPF - wpf

Question

I have divided my entire screen into 3 rows and 2 grid splitters. Currently, my middle row is changing its height when I move my first/second grid splitter.
Expected behaviour:
Basically, the middle row's height should remain the same but should only move as per the change in height of the top/bottom row.
If I move my first grid splitter then my other row should follow it. It means the middle row should move and the last row should increase in height. Similarly, if I move my second grid splitter then middle row should not change its height but should move. Whereas the first row should increase in height.
To understand better, please check my following code.
Can someone please help me, how can I achieve this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="FirstRow">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Red"/>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"/>
<TreeView Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Green"/>
<GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" />
<TreeView Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Blue"/>
</Grid>
<GridSplitter x:Name="gridSplitter1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" Height="5" />
<TextBlock x:Name="SecondRow" Grid.Row="2" Text="SecondRow" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10"/>
<GridSplitter x:Name="gridSplitter2" Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" Height="5" />
<DataGrid Grid.Row="4" x:Name="ThirdRow">
<DataGrid.Columns>
<DataGridTextColumn Header="Col A" />
<DataGridTextColumn Header="Col B" />
<DataGridTextColumn Header="Col C" />
</DataGrid.Columns>
</DataGrid>
</Grid>
<Button Grid.Row="1" HorizontalAlignment="Left" Content="Delete" Margin="10"/>
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Close" Margin="10"/>
</Grid>