Abnormal display of controls within Grid

[dgg1121]

Describe the bug

When the height and width of RowDefinition or ColumnDefinition are smaller than the actual size of the control, the control will be displayed in other rows or columns. This is very counterintuitive and affects the experience

To Reproduce

For example, the code Grid below has a height of 200 and is divided into two lines of equal height. When the Height of the Button control in the second row is greater than 100, this Button will be displayed on the first row

Expected behavior

It should be displayed correctly like WPF

Avalonia version

11.0.10

OS

Windows, macOS, Linux

Additional context

No response

[timunie]

I think your RowDefiniton in WPF is wrong. AFAIK if you omit it, it will be Auto and not Star. So an unfair comparison.

[dgg1121]

I think your RowDefiniton in WPF is wrong. AFAIK if you omit it, it will be Auto and not Star. So an unfair comparison.

What I mean is that the display of controls within rows or columns of Grid controls should be independent. Instead of when there are insufficient row or column controls, its internal controls will be displayed on other columns and rows.

If you set Avalonia's AXAML code to match WPF's XAML code, this display bug will still appear. You can give it a try!

[stevemonaco]

WPF default Height for RowDefinition is 1*. https://github.com/dotnet/wpf/blob/47efe4600a00ac059aeca109459e9a4e8132d907/src/Microsoft.DotNet.Wpf/src/PresentationFramework/System/Windows/Controls/RowDefinition.cs#L1021-L1029

Also, please don't rely on previewers for correct display.

IMO, using explicit dimensions and expecting implicit clipping is a flawed design. Hiding bad math through implicit clipping is not really desirable. The layout design is screwed up in both Avalonia and WPF. You can simply brush it under the rug a bit better in WPF.

You could try checking/enabling ClipToBounds on the 2nd row Grid. You could also try removing the TextBlock to check if this is confusing Avalonia's sizing. Stacking content with different alignments in the same cell may be problematic and is not very grid-like.

[dgg1121]

WPF default Height for RowDefinition is 1*. https://github.com/dotnet/wpf/blob/47efe4600a00ac059aeca109459e9a4e8132d907/src/Microsoft.DotNet.Wpf/src/PresentationFramework/System/Windows/Controls/RowDefinition.cs#L1021-L1029

Also, please don't rely on previewers for correct display.

IMO, using explicit dimensions and expecting implicit clipping is a flawed design. Hiding bad math through implicit clipping is not really desirable. The layout design is screwed up in both Avalonia and WPF. You can simply brush it under the rug a bit better in WPF.

You could try checking/enabling ClipToBounds on the 2nd row Grid. You could also try removing the TextBlock to check if this is confusing Avalonia's sizing. Stacking content with different alignments in the same cell may be problematic and is not very grid-like.

I have tried many ways to verify whether the Grid control is displayed properly, but all the results are the same: when the height and width of RowDefinition or ColumnDefinition are smaller than the size of the control, the control will be displayed in other rows and columns. All tests are conducted in Debug environment instead of preview mode.

Setting the "ClipToBounds" property of the Panel to True can indeed solve this problem, but I believe this should be the default implementation effect of the Grid control, rather than being displayed and implemented by developers.

Perhaps this phenomenon should be optimized in the next Avalonia version!

Setting the "ClipToBounds" property of the Panel to “True”

[stevemonaco]

I'm not sure if this is by-design or not, so the team will have to speak to that. Introducing extra clipping implicitly for Grid cells may have perf concerns.