dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.06k stars 1.73k forks source link

Android RefreshView in a grid can break the grid layout #25368

Open LeadAssimilator opened 2 hours ago

LeadAssimilator commented 2 hours ago

Description

On Android, if you have a 2x2 grid with a row and col with and Auto, then Auto and , along with a refresh view in the first row that has scrollable children, you can't scroll all the way down. It appears that the first grid row ends up taking up all the layout space, including where the Auto row should be, but then the Auto row renders on top, obscuring it, so it actually ends up looking mostly right. But of course, it actually isn't because when you go to scroll the contents of the first * row, you can't get to the last few items because they are actually rendering behind the second auto row. This can be clearly seen in the example below, if you change the ContentView's BackgroundColor to Transparent.

This used to work in XF without issue.

Steps to Reproduce

  1. Create a new MAUI Application
  2. Set app.MainPage with a new instance of MainPage (aka delete the shell)
  3. Replace MainPage.xaml with the following:

    
    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiRefreshScrollGrid.MainPage">
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <RefreshView
            Grid.Row="0"
            Grid.Column="1">
            <CollectionView
                x:Name="cv"
                BackgroundColor="Yellow">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label TextColor="Red" Text="{Binding}"></Label>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>
        <ContentView
            Grid.Row="1"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            HeightRequest="76"
            BackgroundColor="Black">
        </ContentView>
    </Grid>

4. Edit MainPage.xaml.cs ctor to look like this:
```csharp
        public MainPage()
        {
            InitializeComponent();
            cv.ItemsSource = Enumerable.Range(0, 100);
        }
  1. Build/Deploy/Run to an Android emulator such as a Pixel 7 Pro.
  2. Observe you can't scroll past item 95 (if using Pixel 7 Pro).
  3. Change the ContentView's BackgroundColor to Transparent.
  4. Observe the RefreshView and children/all 100 items are visible after scrolling down, but that they have been rendering in the wrong place i.e. they were actually behind the now transparent content view rather than above it like they should have been the whole time.

Image

Link to public reproduction project repository

No response

Version with bug

8.0.92 SR9.2

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

No response

Affected platforms

Android

Affected platform versions

Android 34

Did you find any workaround?

No response

Relevant log output

No response

similar-issues-ai[bot] commented 2 hours ago

We've found some similar issues:

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.