GridSplitter not splitting correctly

Question

I have the following grid

<Grid>        
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

my GridSplitter is on Row 3 (4th row), define as follow:

<GridSplitter Grid.Row="3"
              ResizeDirection="Rows"
              Style="{StaticResource HorizontalGridSplitter}"
              IsTabStop="False" />
<Style x:Key="HorizontalGridSplitter"
       TargetType="{x:Type GridSplitter}">
    <Setter Property="Height"
            Value="4" />
    <Setter Property="HorizontalAlignment"
            Value="Stretch" />
    <Setter Property="VerticalAlignment"
            Value="Stretch" />
    <Setter Property="Margin"
            Value="0" />
</Style>

When I drag the split in order to split row 2/4, It doesn't really split the rows, it seems like the grid height gets bigger.

Answer 1

The GridSplitter has three different resize behaviours, as you can see below:

The GridSplitter re-sizes the specified two columns/rows according to the selected ResizeBehaviour and according to the available space for them, in your case you specified * height for the row before, and Auto height for the row after, which mean it can re-size only the row before, the row after will always remain Auto:

To fix this issue you have to set the row before and the row after to Width="*" and set the re-size behavior to ResizeBehavior="PreviousAndNext" see the following code snippet:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <GridSplitter Grid.Row="3" ResizeDirection="Rows" 
                  Style="{StaticResource HorizontalGridSplitter}"                      
                  IsTabStop="False" HorizontalAlignment="Stretch"
                  ResizeBehavior="PreviousAndNext" />
</Grid>

It also better to set the height of all other rows to Auto or to a fixed value to avoid any weird behaviors :)