WPF: Grid rows scale in the opposite direction of a GridSplitter - wpf

Question

In my WPF app, I have a XAML window that includes auto-sizing titles, sub-titles ad footers, and between them I have other areas that should fill the remaining space.
There is a GridSplitter in the middle that allows users to size the different parts of the screen.
Now, for some strange unknown reason, when I move the splitter, one of the auto-sizing parts on the bottom scales IN THE OPPOSITE DIRECTION OF THE SPLITTER.
The following XAML code is a test layout to reproduce the problem:
<Window x:Class="TestWpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="CornflowerBlue">
<TextBlock>Title</TextBlock>
</Border>
<Border Grid.Row="1" Background="LightSkyBlue">
<TextBlock>Sub-title</TextBlock>
</Border>
<Border Grid.Row="2">
<TextBlock>Auto sizing element</TextBlock>
</Border>
<GridSplitter Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" />
<Border Grid.Row="4" Background="CornflowerBlue">
<TextBlock>Header</TextBlock>
</Border>
<Border Grid.Row="5">
<TextBlock>Auto sizing element</TextBlock>
</Border>
<Border Grid.Row="6" Background="LightSkyBlue">
<TextBlock>Footer</TextBlock>
</Border>
</Grid>
Does anyone know why this is happening?

Answer 1

GridSplitter affects its top and bottom element. You now have two borders and GridSplitter between them, so it will "Stretch" between those element. It doesn't know that you want to stretch between two "Auto sizing elements". It will just resize between those two elements where its placed.
I think this is something that you want:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="CornflowerBlue">
<TextBlock>Title</TextBlock>
</Border>
<Border Grid.Row="1" Background="LightSkyBlue">
<TextBlock>Sub-title</TextBlock>
</Border>
<Border Grid.Row="2">
<TextBlock>Auto sizing element</TextBlock>
</Border>
<GridSplitter Grid.Row="3" HorizontalAlignment="Stretch" Height="5" />
<Border Grid.Row="4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="CornflowerBlue" Grid.Row="0">
<TextBlock>Header</TextBlock>
</Border>
<TextBlock Grid.Row="1">Auto sizing element</TextBlock>
</Grid>
</Border>
<Border Grid.Row="5" Background="LightSkyBlue">
<TextBlock>Footer</TextBlock>
</Border>
</Grid>