maui icon indicating copy to clipboard operation
maui copied to clipboard

Incorrect layout with RefreshView, CollectionView that has an GridItemsLayout on iPhone

Open vpshonyak opened this issue 2 years ago • 1 comments

Description

I'm having an RefreshView with CollectionView that has an GridItemsLayout that should draw two columns of boxes. On Android, it is perfect: image

But not on iPhone. It shows only odd boxes instead: image

Steps to Reproduce

1.Create a new MAUI application. 2. Update MainPage.xaml:

`<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp2.MainPage">

<Grid RowDefinitions="Auto, *">
    <RefreshView>
        <CollectionView WidthRequest="400"
                    Grid.Row="1"
                    BackgroundColor="DarkBlue"
                    ItemsSource="{Binding Numbers}"
                    >
        <CollectionView.ItemsLayout>
            <GridItemsLayout 
                            Orientation="Vertical"
                            Span="2"
                            VerticalItemSpacing="2"
                            HorizontalItemSpacing="2" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid WidthRequest="150" HeightRequest="100" BackgroundColor="Purple">
                    <Label Text="{Binding }" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        </CollectionView>
    </RefreshView>
</Grid>

</ContentPage>`

  1. Update MainPage.xaml.cs:

` namespace MauiApp2;

public partial class MainPage : ContentPage {

public List<int> Numbers { get; } = Enumerable.Range(1, 100).ToList();
public MainPage()
{
	InitializeComponent();
    BindingContext = this;
}

} `

Link to public reproduction project repository

https://github.com/vpshonyak/MauiApp2.git

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.1

Did you find any workaround?

No response

Relevant log output

No response

vpshonyak avatar Nov 13 '22 23:11 vpshonyak

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

ghost avatar Nov 14 '22 15:11 ghost

Is there a particular reason you're putting the RefreshView inside of a Grid here? Also the RefreshView does not have a row assigned from the grid, and having it default to the "Auto" row height is probably causing some strange behaviour because the CollectionView will naturally want to take up all available area on the screen.

If I remove the grid, or set the first row to *, the results appear to be as expected.

Redth avatar Nov 28 '22 18:11 Redth

Hi @vpshonyak. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

ghost avatar Nov 28 '22 18:11 ghost

@Redth I'm just trying to have two columns inside a RefreshView. Not sure how to archive it without a Grid. Changing "Auto" to "*" helps only temporarily while app is Hot Reloaded. Unfortunately, after recompiling and restarting the layout is bad again.

Given code works perfectly in Xamarin/Android/iPhone and MAUI/Android. Sadly, only in MAUI/iPhone layout extends to 200% of screen width.

vpshonyak avatar Nov 30 '22 04:11 vpshonyak

+1

minglu avatar Jan 19 '23 22:01 minglu