> ## Content Index
> Fetch the complete content index at: https://codetraveler.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# Improving CollectionView Scrolling
- URL: https://codetraveler.io/2020/07/12/improving-collectionview-scrolling/
- Published: 2020-07-12T17:04:13.000Z
- Updated: 2020-07-17T16:31:11.000Z
- Description: Sometimes scrolling a Xamarin.Forms.CollectionView (especially on Android) can be choppy. Let's take a look at how to fix it!
- Author: Brandon Minnick
- Tags: Xamarin.Forms, Xamarin, CollectionView, Performance

## Background

I was first [alerted by @anaseeen on Twitter](https://twitter.com/anaseeen/status/1281610967336595458?s=20&ref=codetraveler.io) that my [GitTrends app](https://gittrends.com/?ref=codetraveler.io) had substantial jitter when scrolling the `CollectionView`.

I verified the jitter was also happening on my Google Pixel 3\. Because the Pixel 3 has substantial CPU and RAM resources, this test confirmed that this problem is not device-specific and there is a performance issue in my code.

## Solution

I found that two things were causing the UI to jitter when the user scrolls a [CollectionView](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/collectionview/?WT.mc%5Fid=ImprovingCollectionView-codetraveler-bramin&ref=codetraveler.io):

- Bindings
- Garbage Collection

I was able to remove the jitter by removing bindings from my `DataTemplate` and increasing the size of the [Android Nursery](https://docs.microsoft.com/xamarin/android/internals/garbage-collection?WT.mc%5Fid=ImprovingCollectionView-codetraveler-bramin&ref=codetraveler.io#configuration) which decreases the frequency of garbage collections.

If you'd like to see exactly how I solved it, here is the Pull Request that fixed it in my [GitTrends app](https://gittrends.com/?ref=codetraveler.io): [https://github.com/brminnick/GitTrends/pull/143](https://github.com/brminnick/GitTrends/pull/143?ref=codetraveler.io)

| Before (Substantial Scrolling Jitter)                                                                              | After (No Scrolling Jitter)                                                                                       |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| ![BeforeFix](https://user-images.githubusercontent.com/13558917/87251186-9a005f00-c41e-11ea-90e7-d3ac9d58e56d.gif) | ![AfterFix](https://user-images.githubusercontent.com/13558917/87251189-a5ec2100-c41e-11ea-86f8-089a9d1ce616.gif) |

## Removing DataTemplate Bindings

To remove bindings, we can use a `[DataTemplateSelector](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector?WT.mc%5Fid=ImprovingCollectionView-codetraveler-bramin&ref=codetraveler.io)` to pass the `BindingContext` directly into our `[DataTemplate](https://docs.microsoft.com/dotnet/api/xamarin.forms.datatemplate?WT.mc%5Fid=ImprovingCollectionView-codetraveler-bramin&ref=codetraveler.io)` and assign the values on initialization.

### Before Removing DataTemplate Bindings

```csharp
using Xamarin.Forms.Markup;

class CollectionViewPage : ContentPage
{
    Content = new CollectionView
    {
        ItemTemplate = new ImageDataTemplate()
    }.Bind(CollectionView.ItemsSourceProperty, nameof(CollectionViewModel.ImageList));
}

class ImageModel
{
    public string ImageTitle { get; set; }
    public string ImageUrl { get; set; }
}

class ImageDataTemplate : DataTemplate
{
    public MyDataTemplate() : base(() => CreateDataTemplate())
    {

    }

    static View CreateDataTemplate() => new StackLayout
    {
        Children = 
        {
            new Image().Bind(Image.SourceProperty, nameof(ImageModel.ImageUrl))
            new Label().Bind(Label.TextProperty, nameof(ImageModel.ImageTitle))
        }
   }
}

```

### After Removing DataTemplate Bindings

```csharp
using Xamarin.Forms.Markup;

class CollectionViewPage : ContentPage
{
    Content = new CollectionView
    {
        ItemTemplate = new ImageDataTemplateSelector()
    }.Bind(CollectionView.ItemsSourceProperty, nameof(CollectionViewModel.ImageList));
}

class ImageModel
{
    public string ImageTitle { get; set; }
    public string ImageUrl { get; set; }
}

class ImageDataTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container) => new  ImageDataTemplate((ImageModel)item);

    class ImageDataTemplate : DataTemplate
    {
        public MyDataTemplate(ImageModel imageModel) : base(() => CreateDataTemplate(imageModel))
        {

        }

        static View CreateDataTemplate(ImageModel imageModel) => new StackLayout
        {
            Children = 
            {
                new Image { Source = imageModel.ImageUrl },
                new Label { Text = imageModel.ImageTitle }
            }
       }
    }
}

```

## Increase Nursery Size to Decrease Garbage Collection

We can [set the size of the Android Nursery by setting it in the MONO\_GC\_PARAMS](https://docs.microsoft.com/xamarin/android/internals/garbage-collection?WT.mc%5Fid=ImprovingCollectionView-codetraveler-bramin&ref=codetraveler.io#configuration):

1\. In the Xamarin.Android project, create a new file called `GarbageCollector.config`

2\. In `GarbageCollector.config`, add the following line of code:

```bash
MONO_GC_PARAMS=nursery-size=64m

```

> **Note:** The value for `nursery-size` must be a power of 2 (e.g. 2, 4, 8, 16, 32, 64, 128 etc)  
> **Note:** I recommend trying different values for your `nursery-size` because each app is different and will have different memory requirements

3\. In Visual Studio, in the Solution Explorer, right-click on `GarbageCollector.config`

4\. In the right-click menu, select **BuildAction** \> **AndroidEnvironment**

![Screen Shot 2020-07-12 at 8 53 36 AM](https://user-images.githubusercontent.com/13558917/87250963-388bc080-c41d-11ea-996b-6c16cd718646.png)