Open MaksimZalessky opened 7 months ago
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 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.
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
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?
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 aHorizontalStackLayout
, the grid sizing calculations are incorrect. Also for theColumnDefinitions="*,Auto"
value if the grid is in theExpander
element (CommunityToolkit.Maui). It looks like the first column is set toGrid.ColumnSpan="2"
.Steps to Reproduce
Create a new MAUI project following the default template
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>
The size of the label located in the first column must be recalculated and placed in the first half of the screen.
In this case, the Grid is in the Expander.
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