Why does this extra space appear in the grid?

Question

I looked at this question and found something very strange: it seems that the line height is not calculated correctly in some cases involving Grid.RowSpan .

Here's a simple Grid drawing I'm testing with:

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

And here is a 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 third row (cells # 2 and # 3), in which there is a lot of extra space:

If I adjust the Grid.RowSpan of the 1st and 3rd cells to +/- 1 and adjust the Grid.Row for the second and fourth cells to +/- 1 to account for the extra row, I get this (correctly) result:

I also get the correct results if I remove enough elements from cell # 3 so that it can display on a single line, for example:

And strangely enough, the removal of some objects leads to the fact that only some additional space is applied

I talked about the number of elements in cells # 1 and # 3 and the number of rows, but I can’t understand that there is no convincing pattern to explain this behavior.

What exactly does WPF do behind the scenes when rendering this grid to cause extra space to Grid.RowSpan with Grid.RowSpan on cell # 3?

Answer 1

I came across such states before, as in my question here about extra space appearing in a ListView

For the answer I received from a Microsoft employee:

The error includes a step in the VSPs measurement algorithm that remembers the largest size ever detected and causes all future Measure calls to report a size of at least the same size. In your case, the VSP is initially measured before the triggers are triggered, so it calculates the size as if everything were visible. When the triggers start and compress the buttons, the measurement algorithm calculates the correct (small) size, but then again causes the result to be large.

The behavior of your grid is similar to the behavior of my virtualization panel: something happens with calls to the RowDefinition Measure, which make it remember and always report a larger size, although later on line a, smaller would be better.

In short, you probably found a bug in WPF, which, since there are many workarounds (matching full lines defined for the total, rearranging your grid, whatever else ...) can never attract attention. You can confirm or deny this only by opening a Microsoft Connect error and waiting for a response.

Answer 2

I do not have a complete answer to the question why .NET makes your third line incorrect.
But I argue that you are asking to do it, this is illogical, because there is no reason to have a 0.0 span in two rows.
When lines are split, they are unlikely to be equal in length, and WPF should add length to the abbreviation (s).
In your case, since you split the lines in the shared lines so that WPF applies some weight and doesn't do it right.
If you do not occupy 0 0, then the extra space with row 0 is divided by column 0 and the column of the 1st row equally, which (for me) is the correct answer.

 <Window x:Class="GridRowSizing.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style BasedOn="{StaticResource {x:Type Label}}" TargetType="Label"> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Margin" Value="3"/> </Style> </Window.Resources> <Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel Grid.Column="0" Grid.Row="0" Background="Red"> <Label Content="CELL 1 A"/> <Label Content="CELL 1 B"/> <Label Content="CELL 1 C" BorderBrush="Black" BorderThickness="2"/> </StackPanel> <StackPanel Grid.Column="0" Grid.Row="1" Background="CornflowerBlue"> <Label Content="CELL 2 D" BorderBrush="Black" BorderThickness="2"/> <Label Content="CELL 2 E" BorderBrush="Black" BorderThickness="2"/> </StackPanel> <StackPanel Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Background="Yellow"> <Label Content="CELL 3 A"/> <Label Content="CELL 3 B"/> <Label Content="CELL 3 C"/> <Label Content="CELL 3 D" BorderBrush="Black" BorderThickness="2"/> <Label Content="CELL 3 E" BorderBrush="Black" BorderThickness="2"/> <Label Content="CELL 3 F" BorderBrush="Black" BorderThickness="2"/> </StackPanel> <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Background="Green"> <Label Content="CELL 4"/> </StackPanel> </Grid> </Window> 

Answer 3

As Rob said, this is probably a mistake in WPF measurements. Therefore, I do not know your answer. But to learn the internal workings of WPF applications, I use Snoop . This is a great tool, similar to browser tools that show HTML elements, snoop shows you how the WPF form is laid out, nested elements, element properties, etc. This helps me when trying to figure out problems with the layout. I thought I would mention.