.NET MAUI RC1 - CollectionView extremely slow

[Sergtek]

Description

Doing some tests with the CollectionView I have realized that the control is extremely slow in .NET Maui, I have added a DataTemplate with several elements to simulate a scenario as close to reality (production environment) and I have realized that something is not It is working well since the more items the ObservableCollection has linked to the ItemsSource and the more items the CollectionView has to render, the slower the application starts, the only thing that occurs to me is that the CollectionView recycling system is not working correctly and render all the CollectionView items at the same time, I have created an identical repository in Xamarin.Forms with 9999 items in the CollectionView and everything works fast and well, however in .NET Maui the same case but only with 300 items takes 2:20 minutes in start the app.

When you go to do the tests, all you have to do is go to the MainPageViewModel class and in the constructor there is a loop that is in charge of initializing the ObservableCollection linked to the CollectionView, by default it is configured in 300 elements, which more or less will do that the app takes about 2:20 seconds to start completely, even when it starts after that time there is a little lag if you try to scroll in the CollectionView until a few seconds pass and the performance stabilizes. I recommend lowering that number to 50 or 100 for faster testing in .NET Maui. In the Xamarin.Forms repository it is set to 9999 items and the performance is perfect and fast, probably because the Xamarin.Forms recycling system works fine.

Loop image:

I leave the 2 GitHub repositories in case you need to do tests:

• .Net Maui:
  https://github.com/nacompllo/MauiCollectionView

• Xamarin.Forms:
  https://github.com/nacompllo/XamarinCollectionView

Steps to Reproduce

Download the attached repository and follow the instructions detailed above.

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 10

Did you find any workaround?

No response

Relevant log output

No response

[Dreamescaper]

It will probably work fine if you remove outer VerticalStackLayout.

[Sergtek]

It will probably work fine if you remove outer VerticalStackLayout.

I've tried it but the problem still occurs. I would bet more that it is a problem with the recycling of CollectionView elements since the more items the ItemSource has and the more controls the DataTemplate has the slower the startup is because it probably proceeds to render all the controls of all the items of the CollectionView.

[Dreamescaper]

Ok, I had a similar issue, but caused by the stack layout - it allows collectionView to grow infinitely, and therefore render all the items.
It was closed as not a bug, unfortunately :(

Probably this one is different though, if it didn't help for you.

[Dreamescaper]

Btw, you don't need an outer ScrollLayout either, CollectionView is already scrollable.

[Sergtek]

Ok, I had a similar issue, but caused by the stack layout - it allows collectionView to grow infinitely, and therefore render all the items. It was closed as not a bug, unfortunately :(

Probably this one is different though, if it didn't help for you.

Btw, you don't need an outer ScrollLayout either, CollectionView is already scrollable.

As far as I see something similar has happened to me, since removing the ScrollView works correctly, probably what you said is that with the ScrollView allowed the CollectionView to grow infinitely until all its elements are rendered. This doesn't seem very appropriate, does it make sense for the CollectionView to grow infinitely when it is inside a ScrollView, can this thread be closed, or is it a bug?

[jfversluis]

I think the important thing is here is that it works well in Forms. Then it should also work in .NET MAUI as far as I'm concerned :)

[Sergtek]

Additional note: The CollectionView only grows infinitely when it's inside a ScrollView or VerticalStackLayout. With the rest of the Layouts it does not happen.

[VincentBu]

I try https://github.com/nacompllo/MauiCollectionView on android emulator. It takes about 1 minute to initialize.

[nk54]

Hello, I was looking what was I missing because the same code run in a blink of an eye on Xamarin Forms but on MAUI....
A simple collection of 3000 items takes 5 seconds to render on a real device while it was something like 0.1/0.2 on Xamarin Forms.

And don't even try to scroll on a ListView/CollectionView of more than 100 items : you definitively see the caching strategy in action : it freezes and jerks each time a new line appears on screen...

[Steven-L-42]

ouh i hope there is coming a fix soon. ListView and CollectionView is so incredible slowly.

For tests i run my Views only in a Grid without anything around, use only "10" items and have just the same issue as the Thread Owner.
I cant scroll without lag time from 1-2 seconds.
Xamarin was so smooth <3

Cant understand why this isnt fixed right now.

[kojini]

Do you have an ETA on this issue? I'm struggling to use my app especially on low spec devices due to this issue.

[ghost]

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.

[LennoxP90]

I am having the same issue with 1k items it is taking well over 10 minutes to load on an emulator and my datatemplate is simple

the collectionview is housed in a MAUI toolkit Popup here is what the xaml would look like the contentView is a seperate file that is shared between a contacts page and a new message popup where the issue occurs.

<toolkit:Popup>
 <Grid>
  <ContentView>
   <Grid>
    <Grid>
     <CollectionView>
      <DataTemplate>
       <Grid>
        <Label>
        <Label>
       </Grid>
      </DataTemplate>
     </CollectionView>
    </Grid>
   </Grid>
  </ContentView>
 </Grid>
</toolkit:Popup> 

If i do not house this collectionview in a popup page then it renders quickly

[Mielesgames]

Btw, you don't need an outer ScrollLayout either, CollectionView is already scrollable.

Huh, seriously?
I had to use a stacklayout and a scrollview to make that work

[angelru]

Estoy enfrentando el mismo problema. StackLayout, VerticalLayoutafectan el CollectionViewy el ListViewrendimiento. Hay un retraso para cargar una lista de 224 artículos. Traté de optimizar el DataTemplatediseño, pero el CollectionViewrendimiento sigue siendo muy bajo en Android en comparación con iOS. En forma de xamarin estaba funcionando muy bien

how do you optimize?

[angelru]

Yo estaba teniendo el mismo problema. Envolver el CollectionView en un ScrollView lo arregló para mí.

También comencé a usar .AddRange() en lugar de .Add() al agregar nuevos elementos a la colección ( https://github.com/jamesmontemagno/mvvm-helpers )

ScrollView? but there are no problems with 2 displacements?

[Kanat9494]

I use DevExpress for CollectionView and other to make apps with .net maui. To see this, you can first download this test collection maui project by link: https://github.com/Kalyxt/Test_CollectionView, than you have to run it on your android phone, and you can see the collection view has large lags. To solve this problem, i had used devexpress collection view, and after that the collectionview works without any lags or bugs.
There is the xaml of test_collectionview without devexpress:

<CollectionView 
		x:Name="fro_CollectionView"
		SelectionMode="Single"
		VerticalOptions="Fill"
		HorizontalOptions="Fill"
		MinimumHeightRequest="5"
		ItemsSource="{Binding StockCards}">

	<CollectionView.ItemTemplate>
		<DataTemplate x:DataType="Models:StockCard">
			<SwipeView>
				<SwipeView.RightItems>
					<SwipeItems>
						<SwipeItemView>
							<!--Delete icon-->
							<Frame 
								Grid.Column="0"
								VerticalOptions="Fill"                   
								HorizontalOptions="Fill"
								WidthRequest="88"
								BackgroundColor="red">

								<Grid VerticalOptions="Center" HorizontalOptions="Center">
									<Grid.RowDefinitions>
										<RowDefinition Height="*" />
									</Grid.RowDefinitions>
									<Grid.ColumnDefinitions>
										<ColumnDefinition Width="*" />
									</Grid.ColumnDefinitions>

									<!--Delete-->
									<Label 
										Text="D"
										FontSize="25" 
										HorizontalOptions="CenterAndExpand"
										VerticalOptions="CenterAndExpand" />
								</Grid>
							</Frame>
						</SwipeItemView>
					</SwipeItems>
				</SwipeView.RightItems>

				<!-- Content of SwipeView-->
				<Grid Padding="2">

					<Grid.RowDefinitions>
						<RowDefinition Height="Auto" />
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>

					<Label Grid.Row="0" Grid.Column="0" Text="{Binding Name}"/>
					<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price}"/>

				</Grid>
			</SwipeView>
		</DataTemplate>
	</CollectionView.ItemTemplate>
</CollectionView>

than xaml with devexpress collection view:

<dxcv:DXCollectionView
    ItemsSource="{Binding StockCards}">
    <dxcv:DXCollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <StackLayout
                    Padding="18,20,10,01"
                    x:DataType="Models:StockCard">
                    <Label
                        Text="{Binding Name}"
                        LineBreakMode="NoWrap"
                        FontFamily="Roboto"
                        FontSize="14"
                        />

                    <Label
                        Text="{Binding Name}"
                        LineBreakMode="NoWrap"
                        FontFamily="Roboto"
                        FontSize="12"
                        />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </dxcv:DXCollectionView.ItemTemplate>
</dxcv:DXCollectionView>

P.S. I can't belive that the developers of DevExpress could make collection view smooth scrolling, without any lags, but the developers of the Microsoft, couldn't do that.

https://github.com/DevExpress-Examples/maui-demo-app It is the devexpress maui sample, where they have used a lot of collectionviews, data grid, charts, and all of them work great, i just can't believe how?

I'm sorry for my English

Please, if anyone can, then let the developers of microsoft know, why DevExpress CollectionViews works great, without any lags, but the standard collection view not, why couldn't microsoft devleopers do the same?

[Kanat9494]

I am facing the same issue. StackLayout, VerticalLayout affect the CollectionView and ListView performance. There is a delay to load a list of 224 items. I tried to optimize the DataTemplate design but the CollectionView performance still very poor in android compare to iOS. In xamarin form it was performing great

Please try to use DevExpress, and you'll see how collectionview works great, there are no any lags,
Or you can clone my test_CollectionView from: https://github.com/Kanat9494/Test_CollectionView

I tried to use DevExpress CollectionView and DataGrid, both of them works very well

[Kanat9494]

I am facing the same issue. StackLayout, VerticalLayout affect the CollectionView and ListView performance. There is a delay to load a list of 224 items. I tried to optimize the DataTemplate design but the CollectionView performance still very poor in android compare to iOS. In xamarin form it was performing great

Please try to use DevExpress Collection Views, they work great, there are no any lags, bugs,
You can try this collectionView without devexpress: https://github.com/Kalyxt/Test_CollectionView,
than try my test_collectionview with DevExrpess: https://github.com/Kanat9494/Test_CollectionView, and you'll see the big difference between standard collectionview and dx collectionview,

[angelru]

Estoy enfrentando el mismo problema. StackLayout, VerticalLayoutafectan el CollectionViewy el ListViewrendimiento. Hay un retraso para cargar una lista de 224 artículos. Traté de optimizar el DataTemplatediseño, pero el CollectionViewrendimiento sigue siendo muy bajo en Android en comparación con iOS. En forma de xamarin estaba funcionando muy bien

Intente usar DevExpress Collection Views, funcionan muy bien, no hay retrasos, errores. Puede probar este collectionView sin devexpress: https://github.com/Kalyxt/Test_CollectionView , luego pruebe mi test_collectionview con DevExrpess: https:/ /github.com/Kanat9494/Test_CollectionView , y verá la gran diferencia entre la vista de colección estándar y la vista de colección dx,

does this layout work fine in DevExpress?
#12130
https://github.com/angelru/CvSlowJittering

[Kanat9494]

It has to work with devexpress, any data collection works with devexpress without lags

You can see it:

Screenrecorder-2023-01-16-20-58-12-368.mp4

I made this project with devexpress, where i extract data for collection view from two apis, and devexpress collection view shows it without lags

[LennoxP90]

DevExpress doesn't support windows as a target, and if i recall there is some features missing. I recall my show stopper was DevExpress didn't support data changes to observable collections, and the solution of using BindingList was not feasible with my application.

[Kanat9494]

Estoy enfrentando el mismo problema. StackLayout, VerticalLayoutafectan el CollectionViewy el ListViewrendimiento. Hay un retraso para cargar una lista de 224 artículos. Traté de optimizar el DataTemplatediseño, pero el CollectionViewrendimiento sigue siendo muy bajo en Android en comparación con iOS. En forma de xamarin estaba funcionando muy bien

Intente usar DevExpress Collection Views, funcionan muy bien, no hay retrasos, errores. Puede probar este collectionView sin devexpress: https://github.com/Kalyxt/Test_CollectionView , luego pruebe mi test_collectionview con DevExrpess: https:/ /github.com/Kanat9494/Test_CollectionView , y verá la gran diferencia entre la vista de colección estándar y la vista de colección dx,

does this layout work fine in DevExpress? #12130 https://github.com/angelru/CvSlowJittering

It is the devexpress sample made with.net maui

Screenrecorder-2023-01-16-21-23-09-243.mp4

You can clone it from:
https://github.com/DevExpress-Examples/maui-demo-app

[Kanat9494]

DevExpress doesn't support windows as a target, and if i recall there is some features missing. I recall my show stopper was DevExpress didn't support data changes to observable collections, and the solution of using BindingList was not feasible with my application.

Yes, devexpress doesn't support windows, only ios and android, but is enough for me.

But, I haven't delved into the development yet, so i cant say what else supports and not by devexpress, i just have seen how their library supports large datas for collection view very well

[angelru]

Estoy enfrentando el mismo problema. StackLayout, VerticalLayoutemerger el CollectionViewy el ListViewrendimiento. Hay un retraso para cargar una lista de 224 artículos. Traté de optimizar el DataTemplatediseño, pero el CollectionViewrendimiento sigue siendo muy bajo en Android en comparación con iOS. En forma de xamarin estaba funcionando muy bien

Intente usar DevExpress Collection Views, funcionan muy bien, no hay retrasos, errores. Puede probar este collectionView sin devexpress: https://github.com/Kalyxt/Test_CollectionView , luego pruebe mi test_collectionview con DevExrpess: https:/ /github.com/Kanat9494/Test_CollectionView , y verá la gran diferencia entre la vista de colección estándar y la vista de la colección dx,

¿Este diseño funciona bien en DevExpress? #12130 https://github.com/angelru/CvSlowJittering

Es la muestra de devexpress hecha con.net maui

Grabador de pantalla-2023-01-16-21-23-09-243.mp4
Puede clonarlo desde: https://github.com/DevExpress-Examples/maui-demo-app

CollectionView with simple layout is not slow, try my repository layout.

[Kanat9494]

Estoy enfrentando el mismo problema. StackLayout, VerticalLayoutemerger el CollectionViewy el ListViewrendimiento. Hay un retraso para cargar una lista de 224 artículos. Traté de optimizar el DataTemplatediseño, pero el CollectionViewrendimiento sigue siendo muy bajo en Android en comparación con iOS. En forma de xamarin estaba funcionando muy bien

Intente usar DevExpress Collection Views, funcionan muy bien, no hay retrasos, errores. Puede probar este collectionView sin devexpress: https://github.com/Kalyxt/Test_CollectionView , luego pruebe mi test_collectionview con DevExrpess: https:/ /github.com/Kanat9494/Test_CollectionView , y verá la gran diferencia entre la vista de colección estándar y la vista de la colección dx,

¿Este diseño funciona bien en DevExpress? #12130 https://github.com/angelru/CvSlowJittering

Es la muestra de devexpress hecha con.net maui
Grabador de pantalla-2023-01-16-21-23-09-243.mp4
Puede clonarlo desde: https://github.com/DevExpress-Examples/maui-demo-app

CollectionView with simple layout is not slow, try my repository layout.

I have tried your project, so you made project scrolling both vertically and horizontally.

I can't say, for sure, but I've seen the same devexpress project, wich has vertical and horizontal scrolls, and it scrolls both vertically and horizontally very well. I hope, it will help you.

It is that project, and scrolling works good:

Screenrecorder-2023-01-18-11-39-13-893.mp4

[jonathanpeppers]

At some point, we lost the plot on this issue. There is a lot here!

Closing this and filing new issues that have clear next steps to take:

• .NET MAUI StackLayout complicates migration from Xamarin.Forms #13366
• Add XAML analyzers to avoid common pitfalls #13368

Upvote these if they are important to you, thanks!

Fixes for CollectionView performance / memory issues

It's possible many of the following address issues seen with CollectionView that recently landed in main:

• [core] WeakEventManager+Subscription needs IEquatable #13232
• [controls] fix memory leak in Style and AttachedCollection #13260
• [controls] one less WeakReference in TypedBinding #13304
• [core] WeakEventManager.RemoveEventHandler() should clear subscriptions #13333
• [core] fix memory leaks in bindings #13327
• Let the Grid skip * measurements during the first pass if they'll be overwritten later #13255
• Flag valid measure status in iOS backing views to avoid repeat measuring #12627

I have a slow CollectionView what can I do?

• Check you are not running into the problem described here: Add XAML analyzers to avoid common pitfalls #13368
• Check if you have large images on every row. Can you use a smaller image?

Lastly: create a small sample that reproduces the problem and file a new issue. Thanks!

[angelru]

@jonathanpeppers everything fixed looks good, but what about #12130?

[jonathanpeppers]

@angelru I wouldn't expect to get good performance with a CollectionView inside a CollectionView.

There are some comments on #12130 about a different approach using BindableLayout.

Can you share an updated sample there? I will subscribe to that issue.