Xamarin.forms: [Bug] Items in grouped CollectionView not positioned correctly on iOS

[cristiproj]

Description

I am using grouped CollectionView with GridItemsLayout, with a span of 4.
The first time the page is loaded all the items are on the first column (screenshot 1). After trying to scroll, all the items are rearranged in the 4 column layout. But, the first element is incorrectly (screenshot 2).
The issue only happens on iOS. I tested in the simulator:

• iOS version: 12.2 everything is ok
• iOS version: 13.4 the broken behavior can be observed

Steps to Reproduce

1. Create grouped CollectionView with griditemlayout
2. Bind to observablecollection / list
3. The behavior described can be observed

Expected Behavior

The items are displayed correctly in the groupings according to the settings in the griditemlayout. With no awkward spaces.

Actual Behavior

The items are not displayed correctly, not when the page is first loaded and not when scrolling

Basic Information

• Version with issue: 4.4.0.991265, 4.5.0.530 and 4.5.0.657
• Last known good version: -
• IDE: Visual Studio Community 2019 for Mac, Version 8.5.4 (build 12)
• Platform Target Frameworks:
  
  
  
  • iOS: 13.4
  
  
  • Android: 9.0
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Screenshot 1

Screenshot 2

Reproduction Link

https://github.com/cristiproj/collectionviewissue

Workaround

I have found found a possible workaround in using a listview with a datatemplate containting a flexlayout. Unfortunately, the items in the flexlayout are not arranged as nicely as in the collectionview. A small sample project can be found here: https://github.com/cristiproj/ListViewScheduleTest.

I think, another possible workaround would be by using a custom layout, but I did not look at it.

[jsuarezruiz]

@cristiproj Thanks for the reproduction sample.

[znelson32]

Same problem here, but my scenario is more simple. I have a grouped list of items with a GridItemsLayout. When I add Span="2" to get nice 2x2 boxes, the rendering is all screwed up. The items render over top of each other and jump around when scrolling.

I can't roll back past 4.5.0.356 to see when this bug was introduced because I need the new FontExport stuff. But I confirmed this bug exists in the latest beta available (4.6.0.616-pre4)

[cristiproj]

I think the bug is also related to the iOS version. As I wrote in the issue, on iOS 12.2 the collectionview is rendered correctly, but not on 13.4.

[cristiproj]

A possible workaround is using a listview and flexlayout for the child items. Small sample project for testing: https://github.com/cristiproj/ListViewScheduleTest.

[znelson32]

Thank you, @cristiproj !

[kramer-e]

I have the same issue on the iPhone 8 emulator (iOS13.5) with a CollectionView that has a vertical GridItemsLayout with a span of 2. The items are stacked and glitched and move while scrolling. Issue #8738, #9000 from last year and #10971, #11011 from last week also describe a similar issue. Please give these grouping issues with the CollectionView some priority, I have opened issue #8383 in November last year and it is still not fixed.

[jeffdevalmeida]

I have the same problem.
My code dont work in iPhone 11 and iPhone 12. Just in iPhone 8 and 8 Plus.

I tryied to use CollectionView then list my power bi reports. See this sample at iPhone 8 Plus (iOS 14.1):

But in iPhone 11 and 12, my list dont work. See this sample at iPhone 11 (iOS 14.1):

After some analysis i found a possible solution for this case. I perceive that my tests is using the objects with same properties.

I changed the properties... Now it's work!
New code with properties:

Working at iPhone 11 (iOS 14.1)

XAML Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="{Binding Title}"
             x:Class="Views.RelatoriosView"
             NavigationPage.HasBackButton="False">
    <StackLayout>
        <RefreshView IsRefreshing="{Binding IsBusy}" Command="{Binding LoadReportsCommand}">
            <StackLayout>
                <Label Margin="10,20,10,20"
                           Text=""
                           FontSize="Title"
                           FontAttributes="Bold"
                           HorizontalTextAlignment="Center"
                           VerticalTextAlignment="Center"/>
                <CollectionView x:Name="ReportsCollectionView" ItemsSource="{Binding Reports}" SelectionMode="Single" SelectedItem="{Binding SelectedReport}">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="3"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="100" />
                                </Grid.RowDefinitions>
                                <Image Grid.Row="0"
                                   Source="{Binding Icon}"/>
                                <Label Grid.Row="1"
                                   Text="{Binding Title}" 
                                   FontAttributes="Bold"
                                   HorizontalOptions="Center"
                                   LineBreakMode="TailTruncation" />
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </RefreshView>
        <Image Aspect="AspectFit" Source="mWJYrXW.png"/>
    </StackLayout>
</ContentPage>