Infinite Scroll With the Xamarin Forms Collection View

Hello friends, Xamarin Forms is continuously getting better and it comes with a lot of improvements in every new release. Be it in performance aspects or the addition of new controls, we Xamarin Forms developers have several brand new features. Last year I wrote an article about the new paradigm (Shell) for building apps with Xamarin Forms and its impact on developers productivity. You can find this article here it might interest you.

Recently, the collection view had its experimental flag removed. Which means it is now available in Xamarin Forms without having to add this flag at run-time. The Collection view came with a lot of features useful to display and manipulate intricate list of items. It also has by default features to implement useful functionalities like Infinite Scroll. With the list view, you needed an external plugin to implement this functionality. But today, we will go through the few steps necessary to implement Infinite scroll with the Xamarin Forms collection view. Let’s dive in.

Here is the source code for this tutorial.

If you like this post, don’t hesitate to follow me on Twitter or Gi t hub and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.

Implementing Infinite Scroll with the Xamarin Forms Collection View

As I mentioned above, the collection view comes with features which permits us to implement this functionality. We use Visual Studio’s default Xamarin Forms Shell template to implement this. In this default template, you notice there is a ready made list of items and a service working with a view model. To provide the data displayed on screen. In this service, we add several items I added up to 30 items just for demo purposes. So here are the steps to follow.

Change the list view in the default template to a collection view
The collection view has a property named: “RemainingItemsThreshold“. This property corresponds to the number of items which should be left in the collection view before loading more items.
Create a property in the view model and bind it to this collection view’s property as follows.


        public int ItemTreshold
        {
            get { return _itemTreshold; }
            set { SetProperty(ref _itemTreshold, value); }
        }

//... code left out for simplicity

 public ItemsViewModel()
{
        ItemTreshold = 1;
}

public int ItemTreshold

{

get { return _itemTreshold; }

set { SetProperty(ref _itemTreshold, value); }

}

//... code left out for simplicity

public ItemsViewModel()

{

ItemTreshold = 1;

}

RemainingItemsThreshold="{Binding ItemTreshold}"

1	RemainingItemsThreshold="{Binding ItemTreshold}"

The collection view has a command named “RemainingItemsThresholdReachedCommand“. This command is fired with the number of items remaining (which are not yet displayed) in the collection view are equal to the “RemainingItemsThreshold“
Create a command and bind it to this property as follows

public Command ItemTresholdReachedCommand { get; set; }

1	public Command ItemTresholdReachedCommand { get; set; }

Now remember, infinite scroll is a type of pagination. To implement this pagination, our mock data service should return data which is paginated.
Each time the threshold is reached, a new page should be loaded. Here is the code to load this page.


        async Task ItemsTresholdReached()
        {
            if (IsBusy)
                return;

            IsBusy = true;

            try
            {
                var items = await DataStore.GetItemsAsync(true, Items.Count);

                var previousLastItem = Items.Last();
                foreach (var item in items)
                {
                    Items.Add(item);
                }
                Debug.WriteLine($"{items.Count()} {Items.Count} ");
                if (items.Count() == 0)
                {
                    ItemTreshold = -1;
                    return;
                }
                //MessagingCenter.Send<object, Item>(this, ScrollToPreviousLastItem, previousLastItem);
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
            finally
            {
                IsBusy = false;
            }
        }

async Task ItemsTresholdReached()

{

if (IsBusy)

return;

IsBusy = true;

try

{

var items = await DataStore.GetItemsAsync(true, Items.Count);

var previousLastItem = Items.Last();

foreach (var item in items)

{

Items.Add(item);

}

Debug.WriteLine($"{items.Count()} {Items.Count} ");

if (items.Count() == 0)

{

ItemTreshold = -1;

return;

}

//MessagingCenter.Send<object, Item>(this, ScrollToPreviousLastItem, previousLastItem);

}

catch (Exception ex)

{

Debug.WriteLine(ex);

}

finally

{

IsBusy = false;

}

When our service runs out of pages, we detect it with the condition : if (items.Count() == 0)
When this condition is met, the item threshold is set to -1 ItemTreshold = -1; Causing the collection view to stop calling our command in search of new pages to add.
We wrap this collection view around a refresh view to refresh and retry our infinite scroll with the at will.
Let’s test out infinite scroll with the Xamarin Forms Collection View.

Here is the source code for this tutorial.

Infinite scroll with the Xamarin Forms Collection View Demo

If you find this article useful, please follow me on Twitter, Github, Linkedin, or like my Facebook page to stay updated.

Follow me on social media and stay updated

Conclusion

After running this sample, you will notice that it activates the infinite scroll at the 15th item. This is done without any plugin, but with the native functionalities of the collection view. If you liked this post, you surely will love this one too: Building an Accordion with Xamarin Forms

Follow me on social media and stay updated

4 comments

SurMa BhoPali
February 11, 2020
Where to find full code.
Loading...
- Damien Doumer
  February 11, 2020
  Hi, @munishahmad:disqus thanks for your interest in this article. Here is the source code: https://github.com/coolc0ders/InfinitescrollInCollectionView
  Loading...
  - guizmo
    March 16, 2020
    Hello, According to your work I was trying to make infinite scroll collection view but When the RemainingItemsThresholdReachedCommand event is triggered for the first time, instead of loading the new page and data it continue to bind on this event until all items are load then notthing happens on the ui screen. Could you contact me ?
    Loading...
    - Damien Doumer
      March 18, 2020
      Hello, thanks for your interest in this article. Please what do you mean by it continued to bind on the event ? in the above demo RemainingItemsThresholdReachedCommand is Binded to the ViewModel’s ItemTresholdReachedCommand. If nothing is loaded on the UI, did you verify that you list of items is and “ObservableCollection” and that is binded to the UI properly ?
      Loading...