WPF GridSplitter with multiple siblings not doen't work as expected - wpf

Question

I searched around and didn't find similar question on the forum. I have the following WPF code.
<Window x:Class="WpfApp5.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"
xmlns:local="clr-namespace:WpfApp5"
mc:Ignorable="d"
Title="MainWindow" Height="238.788" Width="406.407">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox TextWrapping="Wrap" Text="TextBox1 should be resized while moving the GridSplitter"/>
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1" />
<StackPanel Grid.Row="2" Orientation="Horizontal" Background="Black">
<TextBlock Padding="5" Text="I want this black section have fixed height while moving the GridSplitter" Foreground="Aqua" VerticalAlignment="Center" />
</StackPanel>
<TextBox Grid.Row="3" TextWrapping="Wrap" Text="TextBox2 should be resized while moving the GridSplitter"/>
</Grid>
</Window>
When the user drags the grid splitter, only the two textbox should be resized. But what I got is like this:
How can I fix this?

Answer 1

Move the StackPanel and the second TextBox into a single Panel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox TextWrapping="Wrap" Text="TextBox1 should be resized while moving the GridSplitter"/>
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1" />
<DockPanel Grid.Row="2">
<StackPanel Orientation="Horizontal" Background="Black" DockPanel.Dock="Top">
<TextBlock Padding="5" Text="I want this black section have fixed height while moving the GridSplitter" Foreground="Aqua" VerticalAlignment="Center" />
</StackPanel>
<TextBox TextWrapping="Wrap" Text="TextBox2 should be resized while moving the GridSplitter"/>
</DockPanel>
</Grid>

Answer 2

It's easy, set VerticalAlignment="Center" by the ´StackPanel´
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox TextWrapping="Wrap" Text="TextBox1 should be resized while moving the GridSplitter"/>
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1" />
<StackPanel Grid.Row="2" Orientation="Horizontal" Background="Black" VerticalAlignment="Center">
<TextBlock Padding="5" Text="I want this black section have fixed height while moving the GridSplitter" Foreground="Aqua" VerticalAlignment="Center" />
</StackPanel>
<TextBox Grid.Row="3" TextWrapping="Wrap" Text="TextBox2 should be resized while moving the GridSplitter"/>
</Grid>

Answer 3

I found that the problem is not because GridSplitter can only split two before and after siblings, it's the wrong RowDefinition! In the code snippet of the question, the first and forth RowDefinition are set to Height="*", which force them to split the additional space evenly. That's why when you drag the splitter and the first and forth row always keep the same height. If I change them according to the following setting, it just works as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox TextWrapping="Wrap" Text="TextBox1 should be resized while moving the GridSplitter" />
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1" />
<StackPanel Grid.Row="2" Orientation="Horizontal" Background="Black">
<TextBlock Padding="5" Text="I want this black section have fixed height while moving the GridSplitter"
Foreground="Aqua" VerticalAlignment="Center" />
</StackPanel>
<TextBox Grid.Row="3" TextWrapping="Wrap" Text="TextBox2 should be resized while moving the GridSplitter" />
</Grid>
So no need to nest any more.