[8.0.3] Grid can't calculate size for internal elements.

[MaksimZalessky]

Description

When you create a grid with a column (row) definition set to * and another definition set to *, and within the grid the child is in a HorizontalStackLayout, the grid sizing calculations are incorrect. Also for the ColumnDefinitions="*,Auto"value if the grid is in the Expander element (CommunityToolkit.Maui). It looks like the first column is set to Grid.ColumnSpan="2".

Steps to Reproduce

1. Create a new MAUI project following the default template

2. Add following code <Grid ColumnDefinitions="*,*" BackgroundColor="Cyan" ColumnSpacing="5"> <HorizontalStackLayout Spacing="5" BackgroundColor="Blue"> <Label Text="Wrapped Star Column. Wrapped Star Column. Wrapped Star Column. Wrapped Star Column." FontSize="18" MaxLines="7" HorizontalOptions="Start" BackgroundColor="LightSteelBlue"/> <BoxView Color="Red" WidthRequest="20" HeightRequest="20"/> </HorizontalStackLayout> <Label Grid.Column="1" Text="Star Column. Star Column. Star Column. Star Column. Star Column." FontSize="18" HorizontalOptions="Center" BackgroundColor="Orange"/> </Grid>

3. The size of the label located in the first column must be recalculated and placed in the first half of the screen.

   

4. In this case, the Grid is in the Expander.

   

Xamarin.Forms	.NET MAUI

Below is a link to the test project.

Link to public reproduction project repository

https://github.com/ZalesskyMaxim/MauiGridTest

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[davidortinau]

I don't see a bug here. Layouts and sizing especially work differently in .NET MAUI by design, so a side-by-side is going to be different in many cases where the layout determined the sizing in Xamarin.Forms but doesn't in .NET MAUI.

HorizontalStackLayout with a long Label is going to keep going offscreen. The stack will NOT constrain the Label in the direction of the stack as you have it here. Turn off clipping on the HStackLayout and make the label backgrounds transparent so you can see the label flow behind the second column.

Similarly when you have 2 Auto columns and the first column content wants ALL the space available, you won't see the second column.

https://learn.microsoft.com/dotnet/maui/migration/layouts?view=net-maui-8.0

https://learn.microsoft.com/dotnet/maui/user-interface/layouts/grid?view=net-maui-8.0

@PureWeen unless you see something in here I don't, I propose this isn't a bug and closing it.

[MaksimZalessky]

I don't see a bug here. Layouts and sizing especially work differently in .NET MAUI by design, so a side-by-side is going to be different in many cases where the layout determined the sizing in Xamarin.Forms but doesn't in .NET MAUI.

HorizontalStackLayout with a long Label is going to keep going offscreen. The stack will NOT constrain the Label in the direction of the stack as you have it here. Turn off clipping on the HStackLayout and make the label backgrounds transparent so you can see the label flow behind the second column.

Similarly when you have 2 Auto columns and the first column content wants ALL the space available, you won't see the second column.

https://learn.microsoft.com/dotnet/maui/migration/layouts?view=net-maui-8.0

https://learn.microsoft.com/dotnet/maui/user-interface/layouts/grid?view=net-maui-8.0

@PureWeen unless you see something in here I don't, I propose this isn't a bug and closing it.

I'll ask a question. Why do we need a GridLayout if it doesn't constrain elements within cells? Please check other examples, the last 2 are especially interesting.

How to make the following design? 1 column - text (can change) 2 сolumn - BoxView (can be any icon) 3 сolumn - button (text inside may change) Note! Check on small screens such as iPhone SE. Columns 1 and 2 should be close to each other.

[PureWeen]

yea, I agree with @davidortinau this is what I'd expect

The GridLayout technically is constraining the HSL to 50 percent of the space but HSL by default just keeps laying out its content horizontally. So, what you're seeing is a behavior of HSL not Grid

If you want it to wrap then you'd probably use another grid inside the grid.

For example, if you just have an HSL and put a width request on it you see the same thing

The HSL and VSL are fairly dumb with how the do layouts. They just tell each thing "hey you have infinite space what size do you want to be?" Cool that's the amount of space you get. The width of the HSL and the height of the VSL don't cause constraints to propagate down to the children.

Any time you have constraints involved you'll want to use a different layout

[MaksimZalessky]

If you want it to wrap then you'd probably use another grid inside the grid.

@PureWeen It doesn't work, I tried it. The result is the same, there are no constraints. The grid only works properly with labels. Other layouts (HSL, VSL, Border, Grid) placed inside have no constraints. Could you provide an example of how the grid can be used to make it work like before?