Grid star (Image?) behaviour inconsistent across platforms

Redth commented 1 year ago

Description

Prefacing that this may be more of an Image handler issue than grid stars, but it's worth exploring in the context of grid as well

Here's an example layout:

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

  <Image Grid.Column="1" Grid.Row="1"
    Source="dotnet_bot.png"
    SemanticProperties.Description="Cute dot net bot waving hi to you!"
    HeightRequest="200"
    HorizontalOptions="Center" />

  <Label Grid.Column="2" Grid.Row="2"
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

  <Label Grid.Column="1" Grid.Row="2"
    Text="Welcome to .NET Multi-platform App UI"
    SemanticProperties.HeadingLevel="Level2"
    SemanticProperties.Description="Welcome to dot net Multi platform App U I"
    FontSize="18"
    HorizontalOptions="Center" />

  <Button Grid.Column="0" Grid.Row="0"
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Center" />
</Grid>

Some videos for showing the behaviour on various platforms:

Android https://user-images.githubusercontent.com/271950/228933782-08dc7e9f-1fbc-416f-a024-85ed8fd1f917.mp4

Windows https://user-images.githubusercontent.com/271950/228933852-0fe9f193-7e40-4432-bdd2-438ac8b2ca12.mp4

Notice how horizontal seems to be relatively well respected... The vertical on the other hand acts strangely. On windows it seems to respect the image height until a certain point at which the image disappears and the available space agrees and things size maybe accurately then? On android the image seems to overflow its available assigned space until it goes away and eventually somehow pops into the left outside of where it has any business being.

It gets even more interesting if you add a ScrollView around the grid.

Steps to Reproduce

File -> New MAUI
Paste the xaml into the mainpage from above

Link to public reproduction project repository

https://gist.github.com/Redth/bb1e22edba21716c000da517ae1d6d1b

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

N/A

Did you find any workaround?

No response

Relevant log output

No response

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

mattleibow commented 1 year ago

@hartez @Redth is this the desired behavior?

https://user-images.githubusercontent.com/1096616/229892884-482cda1d-d830-496f-8276-341439935e83.mov

I am testing on net7.0 after all these PRs are merged:

As a result, these are the PRs that are in there from main:

dotnet / maui