CollectionView with IsGrouped and GridItemsLayout performance issue with Images

[mjsb212]

Description

Using CollectionView with Grouping enabled and a GridItemsLayout when loading up various images there is a bad Lag / Stutter / Jank that appears and gets progressively worse as you scroll toward the end of the list. The same exact images loaded in a LinearItemsLayout scroll smoothly all the way to the end with no issues. Tested on Android with 8.0.0-rc.2.9373 VS 17.7.34018.315

Steps to Reproduce

1. Use the public demo repo linked here.
2. Run the app on Android Device in Release and Compare the 2 Views by scrolling the list to the end.

Link to public reproduction project repository

https://github.com/mjsb212/CollectionViewImages

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 14

Did you find any workaround?

No response

Relevant log output

No response

[jsuarezruiz]

@jonathanpeppers

[cropyai]

@jsuarezruiz @jonathanpeppers as you see above, I have the same similar issue referenced. I can also share some experience with another problem. It only happens in specific design in xaml. I have a Contentview which contains some texts and an image. I am using this contentview template in the collection view. When I add enough amount of images and then do scrolling, as content views appear with the scroll, I see a reloading effect for each image. If I am remembering correctly, the loaded event is called for each content view again & again while scrolling. So, it appears that the collectionview is constantly creating new templates and initiate them again and again for each scroll. I don't know where the old templates go.

If I configure xaml page like below:

    <Grid>
        <Grid
            Padding="30,0"
            RowDefinitions="Auto, *"
            >

            <Button 
                x:Name="btn1"
                Grid.Row="0"
                Clicked="Button_Clicked"
                Text="Hello!"
                BackgroundColor="Gray"
                />

            <!--<ScrollView 
                Scrolled="scrollview1_Scrolled"
                x:Name="scrollview1"  >-->
            <CollectionView Grid.Row="1" x:Name="col_view" HorizontalOptions="Center" Margin="10,10,10,0" VerticalOptions="Fill"  ItemsSource="{Binding Orders}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <controls:OrderCard Margin = "0,0,0,0" Order="{Binding}" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="1" />
                    </CollectionView.ItemsLayout>

                </CollectionView>
            <!--</ScrollView>-->

        </Grid>
    </Grid>

Then the result is this:

x.2.mp4

[mjsb212]

This issue seems to only happen with loading various images in GridLayout, and the img source doesnt matter so a file source, or URL source has the same problem. I also get the image "reloading" effect scrolling -- but if i replace my image bindings with plain drawn shapes then the problem doesnt occur. I also tried the FFimageLoad MAUI compat lib & the problem still ocurrs. I still havent had time to dig all the way into source & not sure if its an image caching or grid collview recycle problem. Will post update if I figure it out.

[cropyai]

@mjsb212 I think the problem is not about image caching etc. It seems problematic in my opinion to reload each contentviews as they reappear on the screen, that really reruns everything in the load event and texts are reassigned again, the image sources are reassigned again etc etc. It just that reassinging texts or plain dawn shapes are faster probably than the image source assigning.

[mjsb212]

@cropyai - Yea I think its a recycle problem, and only seems to happen with the grid layout. I debugged my sample app & I stepped through the MAUI source and I can see a small number of CollectionView Item instances are created and these are recycled when using LinearItemsLayout -- BUT, as soon as I switch to the GridItemsLayout the instances just keep growing and growing -- and so this is probably the issue.

[criss02-cs]

Same problem using GridItemLayout on Android

[ghost]

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.

[pboisso]

Also impacted by this bug. Can't release our Maui Android app because of that. Any timeframe?

[mjsb212]

criss02-cs , pboisso I've got an app that's been in limbo because of this for 4 months now and couldn't release it either as there are no workarounds. I tried Every workaround I could think of for several months, and then I also tried 2 DIFFERENT 3rd party paid ListView/CollView type controls (Syncfusion, Telerik) and the issue is exactly the same in those controls; which leads me to believe the issue lies deep in the Xamarin INTEROP Java code and the Android native RecyclerView implementation. I'm not sure why this issue got ignored and backlogged, because its a MAJOR issue; and I've seen a lot of complaints online about CollectionView performance and scrolling, and that apps cant be released because of this on Android. I know @jonathanpeppers is aware of this issue, and he's got it in the milestone/Todo list for .net 9.0 release which is November, so I'm hoping they get around to it soon...fingers crossed

[williambuchanan2]

We are getting that jitter without grouping:

#19383