Improve CollectionView Performance

Question

We have a landing page that has this layout:

When you click on one of the section buttons, the ObservableCollection in the ViewModel is set to another list as so:

private async void processtableOfContentsListView_ItemTapped(object sender, ItemTappedEventArgs e)  
{  
    var tocItem = e?.Item as TableOfContentsItem;  
    if (viewModel.SelectedTableOfContentsItem == tocItem)  
    {  
        return;  
    }  
   viewModel.CurrentSectionItems = tocItem.SectionItems;  
   viewModel.SelectedTableOfContentsItem = tocItem;  
}  

This is simplified as there's other operations going on.

My problem is that the CollectionView is taking too long to change sections. There's a noticeable delay when trying to load up the new items. To be fair, the DataTemplate's for the items are a little complex. I've simplified them as much as possible, but you can still notice a delay in trying to draw them.

I'd like to speed this change up as much as possible, but its starting to look like I may need to just deal with the delay itself instead of freezing. It would be nice to have a loading indication in between changing sections. Like an ActivityIndicator. But I can't seem to find how to make UI changes in the beginning of the EventHandler for the buttons. Even if I clear the ObservableCollection in the beginning of the event handler, it still will wait until the method finishes before showing any UI changes.

I've checked and the event handler is running on the main UI thread. I've even tried running the rest of the code on a background thread after changing the section to see if it would before continuing the method, but no luck:

        private async void processtableOfContentsListView_ItemTapped(object sender, ItemTappedEventArgs e)  
        {  
            if (MainThread.IsMainThread) //is true  
            {     
            }  
  
            var tocItem = e?.Item as TableOfContentsItem;  
  
            await Task.Run(async () =>  
            {  
                await MainThread.InvokeOnMainThreadAsync(() => {  
                    viewModel.SelectedTableOfContentsItem = tocItem;  
                    viewModel.CurrentSectionItems = tocItem.SectionItems;  
                });  
            });  
              
            Task.Run(() => DoWork(sender, e));  
  
        }  

My question is two parted.

Does anyone have an idea how to speed up the redrawing of the CollectionView?

If not, how do I set off the UI change to clear the CollectionView in the beginning of the event handler so I can add a loading indicator?

Answer 1

Hello,

Welcome to Microsoft Q&A!

Here some tips for improving CollectionView's performance .

• Bind the ItemsSource property to an ObservableCollection<T> .
• Use fewer elements. For example, consider using a single FormattedString label instead of multiple labels.
• Avoid deeply nested layout hierarchies. Use AbsoluteLayout or Grid to help reduce nesting.
• Avoid specific LayoutOptions other than Fill (Fill is the cheapest to compute).
• Use FFImageLoading to show internet image , it will cache the image locally.
• Consider a custom renderer if you need a specific, complex design presented .

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

You need not use Task.Run but only set the ItemSource only 10 items.

do not set all items to the collectionview.

if you scroll the collectionview add the items imcreasely.

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.