Why is this extra space appearing in a Grid?

Question

I was looking at this question and discovered something very weird: it appears that the height of a row is incorrectly calculated in some cases involving Grid.RowSpan.

Here's an simple drawing of the Grid I'm testing with:

---------------
|   1   |     |
--------|  3  |
|   2   |     |
---------------
|      4      |
---------------

And here's some sample code for this Grid that demonstrates the problem:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Background="Red">
        <Label Content="CELL 1 A"/>
        <Label Content="CELL 1 B"/>
        <Label Content="CELL 1 C"/>
    </StackPanel>

    <Grid Grid.Column="0" Grid.Row="2" Background="CornflowerBlue">
        <Label Content="CELL 2 D"/>
    </Grid>

    <StackPanel Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Background="Yellow">
        <Label Content="CELL 3 A"/>
        <Label Content="CELL 3 B"/>
        <Label Content="CELL 3 C"/>
        <Label Content="CELL 3 D"/>
    </StackPanel>


    <Grid Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Background="Green">
        <Label Content="CELL 4"/>
    </Grid>
</Grid>

The end result is the height of the 3rd row (cell #2 and #3) has a lot of extra space in it:

If I adjust the Grid.RowSpan of the 1st and 3rd cells by +/- 1, and adjust the Grid.Row for the 2nd and 4th by +/- 1 to account for the extra row, I get this (correct) result:

I also get correct results if I remove enough elements from cell #3 so it can render in a single Row, like this:

And strangely enough, removing some the objects results in only some of the extra space being applied

I've been messing around with the number of elements in cells #1 and #3, and number of Rows, but I can't seem to figure out a conclusive pattern to explain this behavior.

What exactly is WPF doing behind the scenes when rendering this Grid to cause the extra space to appear when the Grid.RowSpan on cell #3?

Answer 1

I've run into this kind of condition before, as in my question here about extra space appearing in a ListView

Per a response I got from a Microsoft employee:

The bug involves a step in VSP’s Measure algorithm that remembers the largest size ever discovered and forces all future Measure calls to report a size at least as large. In your case, the VSP is initially measured before any triggers have fired, so it computes the size as if everything were visible. When the triggers fire and collapse the buttons, the measure algorithm computes the correct (small) size, but then forces the result to be large again.

The behavior of your grid appears similar to the behavior of my Virtualizing Stack Panel: Something is going on with the RowDefinition's Measure calls which force it to remember and always report a larger size, even though later on down the line a smaller one would be better.

In short, you probably found a bug in WPF, which, because there are myriad workarounds (match the total rows defined to the total needed, rearrange your grid, whatever else...) may never get attention. You can confirm or refute this only by opening a Microsoft Connect bug and waiting for their reply.