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 Github 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.
  • 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
  • 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.
  • 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
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

      • guizmo

        Reply

        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 ?

        • Damien Doumer

          Reply

          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 ?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.