ScrollView in Grid cell multiple issues on iOS, Android and WinUI.

Keflon commented 1 year ago

Description

Grid with RowDefinitions="*,*" where each grid cell contains a ScrollView ...

Scenario 1:

<Grid RowDefinitions="*,*">
    <ScrollView Grid.Row="0" >
        <Rectangle HeightRequest="500" BackgroundColor="Blue"/>
    </ScrollView>
    <ScrollView Grid.Row="1" >
        <Rectangle  HeightRequest="500" BackgroundColor="Yellow" />
    </ScrollView>
</Grid>

Android: The Grid cells are 50/50 and the Rectangle can be scrolled within the ScrollView. (Pixel 5, Emulator)
iOS: [BUG] The Grid cells expand to fit the Rectangle, i.e. they are too big. (iPhone SE, simulator)
Windows: [BUG] The Grid cells appear to be the correct height but the Rectangles are minimal height.

Image 1.1

Image 1.2

Image 1.3

Scenario 2:

<Grid RowDefinitions="*,*">
    <ScrollView Grid.Row="0" >
        <Button Text="A Button in a ScrollView" HeightRequest="500" BackgroundColor="Blue"/>
    </ScrollView>
    <ScrollView Grid.Row="1" >
        <Button Text="A Button in a ScrollView" HeightRequest="500" TextColor="Blue" BackgroundColor="Yellow" />
    </ScrollView>
</Grid>

Android: The Grid cells are 50/50 and the Buttons can be scrolled within the ScrollView.
1. Android: [BUG] If this text has InputTransparent=True, it does not show.
iOS: [BUG] The Grid cells expand to fit the Button, i.e.they are too big. (iPhone SE, simulator)
Windows: [BUG] The Grid is 50/50, the Button is 500 in height, but the ScrollView is not scrollable.

Image 2.1

Image 2.2

Image 2.3

EDIT: The ScrollBars are present and work correctly. See the comment after this post.

Steps to Reproduce

File->New MAUI app. Replace the root object in MainPage.xaml with one or the other Grid shown below ...

Scenario 1:

<Grid RowDefinitions="*,*">
    <ScrollView Grid.Row="0" >
        <Rectangle HeightRequest="500" BackgroundColor="Blue"/>
    </ScrollView>
    <ScrollView Grid.Row="1" >
        <Rectangle  HeightRequest="500" BackgroundColor="Yellow" />
    </ScrollView>
</Grid>

Android: The Grid cells are 50/50 and the Rectangle can be scrolled within the ScrollView. (Pixel 5, Emulator)
iOS: [BUG] The Grid cells expand to fit the Rectangle, i.e. they are too big. (iPhone SE, simulator)
Windows: [BUG] The Grid cells appear to be the correct height but the Rectangles are minimal height.

Scenario 2:

<Grid RowDefinitions="*,*">
    <ScrollView Grid.Row="0" >
        <Button Text="A Button in a ScrollView" HeightRequest="500" BackgroundColor="Blue"/>
    </ScrollView>
    <ScrollView Grid.Row="1" >
        <Button Text="A Button in a ScrollView" HeightRequest="500" TextColor="Blue" BackgroundColor="Yellow" />
    </ScrollView>
</Grid>

Link to public reproduction project repository

https://github.com/Keflon/MauiGridBug

Version with bug

7.0 (current)

Last version that worked well

6.0.312

Affected platforms

iOS, Android, Windows, I was not able test on other platforms

Affected platform versions

Latest.

Did you find any workaround?

No workaround found yet.
The problem is new, but I didn't notice which update caused it. It was a recent update.

The disappearing text (when InputTransparent="True") for Android is visible if IsVisible is initially true, i.e. not databound to a bool that starts false.
There are many other 'quirks' to the layout, some of which may be symptoms of the same underlying problem. These caused some difficulty providing a succinct demo project.

Maybe this is a clue? ...
The problem that led me here is a WinUI problem where it appears resizing the width of the Window causes a layout pass that sorts out some grid-related layout issues I was having, at the cost of causing other issues. I'm being vague because I'm not certain whether the problem lies with me; if not, I'll raise a bug if I don't find an existing one.
The problems all centre around a custom-control that contains a ScrollView.

Relevant log output

No response

Keflon commented 1 year ago

~~No workaround found yet.~~

Setting an explicit height on the Grid cells dodges the problem where cells are too big.

Bugfix:

The sample had a Label in the foreground with InputTransparent=True yet it consumed input and prevented the ScrollView from scrolling.

I have minimised the label size in the repo so it doesn't get in the way.

Updates to scenario 2 after point 2 was applied:
~~- Windows: [BUG] The Grid is 50/50, the Button is 500 in height, but the ScrollView is not scrollable.~~
The ScrollView is scrollable.

All other bugs are as described above.

drasticactions commented 1 year ago

Can you split these bugs into separate issues with separate solutions? I appreciate what you wrote, but it's hard for me to understand your exact problem by going back and looking at these drawings pointing to things. Likewise, having one "uber" bug makes it harder to fix and close.

Keflon commented 1 year ago

Apologies, I can see this report is messy. I was in a rush and whilst writing the minimum repo I ran into the Rectangle and Button behaving differently, and then InputTransparent not working on all platforms.

The bug I was trying to report is simply this:

If an auto-sized gridrow has a ScrollView as the root element, the layout is wrong in different ways for WinUI and iOS.
- The 'wrong' is also different depending on the control inside the ScrollView, as demonstrated by the 2 xaml snippets.

Unless you tell me that clears things up I'll create the following bugs reports, each with separate repos:

iOS bug. Auto-sized Grid row containing ScrollView sizes itself to the full height requested by the ScrollView content.
WinUI bug. Auto-sized Grid row containing ScrollView containing a Rectangle ignores explicit HeightRequest on the Rectangle. (and perhaps other controls, but not all)

Please note there are probably more symptoms of the underlying bug, e.g. I've got grid-cells resizing themselves vertically on WinUI when the Window is resized horizontally. I just don't have time to write up everything I run into. Wish I did.

I'll write up the 2 InputTransparent problems separately as 2 separate bugs. (doesn't work / can hide a label)

Before I write these up, can you let me know if that's what you're asking for, and perhaps save me some time if you're aware of these problems already being reported?

Please feel free to close this bug once you have replied.

Keflon commented 1 year ago

I have written up 4 bugs to replace this bug.

@drasticactions I'm closing this bug because it is covered by the other 4.

dotnet / maui