Slow Scrolling Performance in CollectionView or ScrollView

[OverDodo]

Description

When adding multiple different images to a CollectionView or a Grid inside a ScrollView, scrolling through the App is extremely laggy. I have tested this with different ImageSources (Uri, Stream) with no noticable difference. The performance only plummets when using different Images, its not perfectly smooth with similar images either though. Used to be perfectly smooth in Xamarin.Forms.

Tested this in 7.0 and 8.0.0 preview 7. There seems to be no relevant log output

Steps to Reproduce

1. Use the public demo repo and optionally change the AppShell.xaml.cs to create Tiles with different Images.
2. Run the app in an android emulator or on an android device and scroll through the page(s).

Link to public reproduction project repository

https://github.com/OverDodo/MauiTileSample

Version with bug

8.0.0-preview.7.8842

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 13

Did you find any workaround?

No response

Relevant log output

No response

[xtuzy]

I try record count of new Grid , find your collectionview don't recycle item to reuse, but i don't know why.

[OverDodo]

I try record count of new Grid , find your collectionview don't recycle item to reuse, but i don't know why.

That might be part of the problem but even without loading new content (which I had in ScrollView, which had all Tiles loaded all the time), the performance is still very slow.

[angelru]

@OverDodo A while ago I posted a performance issue with CollectionView, even though it didn't have images. In principle, better performance should be seen in .NET 8, according to the reports I provide @jonathanpeppers. https://github.com/dotnet/maui/issues/12130

[datoml]

I am experiencing the same problem. Unfortunately the latest preview of .net8 does not help either. Is there a timetable when a fix will be available?

[xtuzy]

They fix it slowly, If you only use vertical list, try see my library https://github.com/xtuzy/MAUICollectionView

[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.

[mjsb212]

I have the same problem. CollectionView has been a total disaster for me, I have tried so many workarounds for many months but scrolling is just never smooth -- Especially with images & grid layouts. I think the built in image caching might be compounding alot of the problems. I wish CollectionView would be scrapped and rebuilt / replaced at this point.

[angelru]

Try using: https://github.com/Redth/FFImageLoading.Compat

Supposedly CollectionView with .NET 8 should have more performance

[mjsb212]

I have tried to resolve this issue using 3rd party Image Caching as @angelru suggested with: https://github.com/Redth/FFImageLoading.Compat and unfortunately the CollectionView performance is actually worse using the MAUI FFImage caching lib. I also tried running the app with MAUI/Android SDK 8.0.100-rc.2 and the performance does not improve. The problem only occurs with the use of multiple different images (all scaled with the same same size / aspect ratio) inside a GridItemsLayout with CollectionView. I tried changing Grid Column's count, different Image scale settings and Sizes using Height and Width and Aspect ratios/properties, I removed Bindings, also used only C# to create the CollView instead of XAML/Bindings -- and noting improves the performance. I also manually scaled down all of my images in the folder I'm loading them from to around 96K, like Android uses for thumbnails, to see if it was an image size/memory issue and that did not help either. BUT -- If I Load the same EXACT size and amount of images in a LinearLayout instead of the GridItemsLayout the scrolling and performance is perfectly fine all the way to the end of the list, which is why I believe it has something to do with GridItemsLayout. I'm currently digging into source to try and find the cause of the problem. Increasing Android GC Nursery and Heap size did not help - Profiling the app in Release did not hint to any memory leaks, etc... Also -- The performance does get WORSE as I scroll further down the CollectionView, scrolling is fine and smooth for the first half of CV. If anyone has an insight please share as our app development has stalled because of this issue. A working CollectionView with different images in a Grid layout is a standard for mobile app development, so I hope this issue is not Backlogged and gets worked on soon!

[mjsb212]

@OverDodo @datoml - Mr. Jonathan Peppers @jonathanpeppers has made amazing performance improvements for CollectionView in 8.0.100-rc.2 -- Compared to 7.0 I am seeing a 100% improvement and smooth scrolling in CollectionView with images in all layouts used EXCEPT unfortunately GridItemsLayout. Are the grids not being recycled properly? Would love to find the cause of this problem and fix to finally have a fully functioning CV.

[OverDodo]

@OverDodo @datoml - Mr. Jonathan Peppers @jonathanpeppers has made amazing performance improvements for CollectionView in 8.0.100-rc.2 -- Compared to 7.0 I am seeing a 100% improvement and smooth scrolling in CollectionView with images in all layouts used EXCEPT unfortunately GridItemsLayout. Are the grids not being recycled properly? Would love to find the cause of this problem and fix to finally have a fully functioning CV.

Thanks for the info! Happy something is happening, I do hope the Grid Layout will be fixed asap, I want to migrate to MAUI before Android 14 comes to our work mobile devices..

[mjsb212]

I've posted my sample app with the Images GridItemLayout / Caching issue in a public repo and filed bug report here: https://github.com/dotnet/maui/issues/18881

[criss02-cs]

Same problem using GridItemLayout on Android

[pboisso]

Any updates on this?

[Chocopro713]

I don't know why Maui was created with an inefficient CollectionView or with any list such as ListView or Stacklayout BindableLayout

[lucianparvu]

I can confirm that I have some scroll lags in collection view in Android .net 7 and 8.

[Chocopro713]

I found a solution

For example, what I did in Xamarin was that I had the list and a frame as a child, but here in Maui it is different, the child has to be a Grid so that you do not have performance problems in the app

I had a Border as a child on the list and the app automatically crashed

<CollectionView 
    ItemsSource="{Binding Restaurants}"
    VerticalOptions="FillAndExpand">
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
            Orientation="Vertical"
            Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:RestaurantModel">
            <Grid>
                <Border Margin="20">
                ...
                </Border>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

[williambuchanan2]

Not only is it laggy - we are seeing an uncontrollable jitter which makes it unusable on some devices:

https://github.com/dotnet/maui/issues/19383

[angelru]

I found a solution

For example, what I did in Xamarin was that I had the list and a frame as a child, but here in Maui it is different, the child has to be a Grid so that you do not have performance problems in the app

I had a Border as a child on the list and the app automatically crashed

<CollectionView 
    ItemsSource="{Binding Restaurants}"
    VerticalOptions="FillAndExpand">
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
            Orientation="Vertical"
            Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:RestaurantModel">
            <Grid>
                <Border Margin="20">
                ...
                </Border>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

So why do we have controls in MAUI that cannot be used with CollectionView?

[williambuchanan2]

I found a solution

I have used that empty grid thing in a few places to fix layout problems, but unfortunately it didn't work for me in my current scenario!

[mjsb212]

This is a major problem and still isn't fixed! Any CV layout using grid columns and images will not work on Android. As the CV list grows and scrolls to the end; there will be greater lag and stutter, and eventually there are crashes / app freeze. I have major performance issues with > 1000 items / images scrolling -- it seems the virtualization is broken on Android. There was a good discussion a while back about using the native Android RecyclerView as a workaround here: https://github.com/dotnet/maui/discussions/18027 -- If any one has any Native implementations please share your workarounds to issue: https://github.com/dotnet/maui/issues/21554

[williambuchanan2]

It’s not just android. I have the same issue on iOS and it happens when there are only 20 items in the list.

Only happens on some devices though so must be a certain scenario triggering the problem. It’s a major issue though - which means it’s unlikely to be fixed any time soon.

[zafrkaya]

Does anyone have a workaround for this problem? Or any progress on the maui side?

[erickvelasco11]

Hi team I was found something and could be interesting for someone.

If I nested the CollectionView inside of a StackLayout with a Padding=16, or Margin=16 or even if I add Margin or Padding to the CollectionView itself, the CollectionView is laggy, but if I remove all Paddings and Margins nested before of the CollectionView, it improves a lot.

Take this example, is a really simple CollectionView with a Binded Label inside of a StackLayout. This is my page, no more, and the CollectionView is really lagged just with 10 records.

<StackLayout Padding="16">
    <CollectionView ItemsSource="{Binding Tours}"
                    VerticalOptions="FillAndExpand">
        <CollectionView.EmptyView>
            <StackLayout>
                <Label Text="No tours"
                       FontFamily="InterRegular"
                       HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand" />
            </StackLayout>
        </CollectionView.EmptyView>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:TourByEmployee">
                <StackLayout>
                    <Label Text="{Binding Tour.Name}"
                           FontFamily="InterMedium"
                           FontSize="20"
                           Margin="0,8,0,0" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

I've removed the Padding in the CollectionView (Margin have same behavior) and I added it in the StackLayout of each item. This improves the performance a lot even in Debug mode.

<StackLayout>
    <CollectionView ItemsSource="{Binding Tours}"
                    VerticalOptions="FillAndExpand">
        <CollectionView.EmptyView>
            <StackLayout>
                <Label Text="No tours"
                       FontFamily="InterRegular"
                       HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand" />
            </StackLayout>
        </CollectionView.EmptyView>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:TourByEmployee">
                <StackLayout Padding="16,0">
                    <Label Text="{Binding Tour.Name}"
                           FontFamily="InterMedium"
                           FontSize="20"
                           Margin="0,8,0,0" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

I don't know why, I don't know if in a big data collection works, but for my case it's working very good now. I know this is a workaround, not a fix, but could works for someone.

[angelru]

What I don't understand is why we have to add an extra element when our design doesn't need it.

[kenchan97]

i made a test , collection View even worse than HTML5 virtual List......... what's wrong with it....

[georgeemr]

Any update?

[am-kh]

Incredible! This might just be the most critical bug imaginable in MAUI. The collectionview is essential to every mobile application. Despite offering MAUI numerous chances, it repeatedly disappoints, leading me to question whether it will ever live up to expectations. :(

[Jason-PocketBard]

FYI I didn't experience any issues on .NET MAUI 8.0.3, but upgrading to any version afterward introduces severe performance issues on CollectionViews. In my case, I eventually found that adding any kind of padding or margin to the left or right sides of a CollectionView or any of its parent layouts caused excessive stuttering and lag, especially while scrolling. Removing all left and right padding/margin resolved the issues, but it's not ideal, as it leads to imposed UI restrictions.

[sovdchains]

I know this should not be a solution, but it is atleast a workaround: Using FFImageLoading.CachedImage seems to resolve the issue in some scenarios