Resizing problem with multiple gridsplitters and different sizes

Question

I'm having a weird problem with Gridsplitters that I've been trying to solve all day, but neither the documentation nor Google has really been able to help me with this problem.

The issue is that I have a grid with multiple gridsplitters, where some of the rows have different height units. Three of the rows have concrete height values and one row have 1 star to let it "soak" up all the left over space.

Unfortunately this sets off some weird gridsplitter behavior. Basically, trying to set the height of GridRow 4 and 6 by manipulating the gridsplitter in Row 5, will not affect the height of row 6, the bottom row. Instead, it manipulates row 4 and row 2 and overlaps the gridsplitter in row 3.

Were I to set all the row heights to a specific pixel height, the gridsplitters all work fine, but this lets the Grid grow beyond the edge of the screen, which is not what is intended.

I've made a small sample project to illustrate the problem.

<Window x:Class="GridSplitterTest.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:GridSplitterTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="100"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" >TextBlock01</TextBlock>
    <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Black" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows"></GridSplitter>
    <TextBlock Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" >TextBlock02</TextBlock>
    <GridSplitter Grid.Row="3" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Black" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows"></GridSplitter>
    <TextBlock Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center" >TextBlock03</TextBlock>
    <GridSplitter Grid.Row="5" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Black" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows"></GridSplitter>
    <TextBlock Grid.Row="6" HorizontalAlignment="Center" VerticalAlignment="Center" >TextBlock04</TextBlock>

</Grid>

Anyone with a good idea of what is wrong and if there's any way to solve this?

Answer 1

I don't think anything is actually wrong here. You have all rows but one set to be fixed size. So adjusting any of the row heights only allows the grid to readjust that one row (row#2) to compensate because the other remaining rows (rows #0 & 6) are also a fixed size.

I think the only way to solve this would be to make all the textblock rows proportional. For example:

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