GridSplitter does not work correctly, expands child outside window

[skanvk15]

• .NET Core Version: 3.0 Preview 8

• Windows version: Windows 10

• Does the bug reproduce also in WPF for .NET Framework 4.8?: Not sure

Problem description:

I have a window with a grid with 2 rows. Between the rows I have a grid splitter. I want the bottom row to start with an initial height, but allow user to expand it. Both rows can collapse to height 0 or expand to fill the entire window.

When I drag the grid splitter to the top edge and continue dragging the mouse (without releasing the button) the bottom row keeps expanding for ever. I expect the gird splitter to stop expanding the bottom row as soon as the splitter hits the top of the window.

When I drag the grid splitter down it works correctly.

Actual behavior:
When I drag the grid splitter to the top edge and continue dragging the mouse (without releasing the button) the bottom row keeps expanding for ever.

Expected behavior:
I expect the gird splitter to stop expanding the bottom row as soon as the splitter hits the top of the window.

Minimal repro:
Create a new WPF app with this xaml:

<Window x:Class="WpfSplitterApp1.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:WpfSplitterApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <TextBox x:Name="tb1" AcceptsReturn="True" Margin="10" Background="LightCyan" VerticalScrollBarVisibility="Visible"
                     Text="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        </Grid>

        <GridSplitter Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="6"/>
        
        <Grid Grid.Row="1">
            <TextBox x:Name="tb2" AcceptsReturn="True" Margin="10" Background="LightGreen" VerticalScrollBarVisibility="Visible"
                     Text="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        </Grid>
    </Grid>
</Window> 

Run the application and move/size the application window so you can test dragging the grid splitter from its location to a point above the window.
Expand the grid splitter up and continue beyond window. The height is displayed in the text box. You will see it increasing.

[jeremy7nelson]

This happens when the row or column immediately before the grid splitter is Auto or Pixel and does not happen when it is Star.

[Lumpz]

I was running into this exact issue and was able to circumvent it by binding the MaxHeight of the Row being adjusted by the GridSplitter to the ActualHeight of a parent element:

<Grid x:Name="myGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MaxHeight="{Binding ElementName=myWindow, Path=ActualHeight}" />
        ...
    </Grid.RowDefinitions>
    ...
</Grid>

This prevented my Row from expanding infinitely outside of the window.

[AndreiMaroiu]

Hello, also found this issue in my code, but just when having the Height property set to Auto or Pixel, how Jeremy mentioned, but only when having an image in one of the rows. When using a TextBlock for example it did not happen. For my use case it was important to use the Height="Auto" in order to hide the image if there was no image to display.

Sample for reproducing:

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

    <RowDefinition Height="5"/>

    <RowDefinition Height="Auto" />

  </Grid.RowDefinitions>

  <TextBlock Text="Hello"/>
  <GridSplitter Grid.Row="1" ResizeDirection="Rows" Height="5" HorizontalAlignment="Stretch"  />
  <Image Grid.Row="2" Source="{Binding ImagePath}" Stretch="Uniform" StretchDirection="DownOnly"/>

</Grid>

The "ImagePath" is a string property from the viewmodel that represents the full path to the image.

I will leave here a small fix for my case, if anybody else has the same problem. I created a converter for the Height property in order to have a Star when path is valid or return 0 if the path is not valid. Hope this helps someone.

The converter:

public sealed class ImageGridSizeConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    if (value is string str && !string.IsNullOrWhiteSpace(str))
    {
      return new GridLength(1, GridUnitType.Star);
    }

    return new GridLength(0, GridUnitType.Pixel);
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

The updated xaml:

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

    <RowDefinition Height="5"/>

    <RowDefinition Height="{Binding ImagePath, Converter={StaticResource ImageGridSizeConverter}}" />

  </Grid.RowDefinitions>

  <TextBlock Text="Hello"/>
  <GridSplitter Grid.Row="1" ResizeDirection="Rows" Height="5" HorizontalAlignment="Stretch" />
  <Image Grid.Row="2" Source="{Binding ImagePath}" Stretch="Uniform" StretchDirection="DownOnly"/>

</Grid>

I would still like to be able to use the Height="Auto" without an issue. I believe this would simplify a lot the logic and save some time.

[LevYas]

It's still an issue. I managed to find the solution to my situation based on this SO answer:
I had this configuration:

<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>

with GridSplitter being in the middle. I changed this to use star notation and it worked well:

<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0.01*"/>

But it must work without such tricks since an all-star layout is not always possible or convenient.