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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | public int ItemTreshold { get { return _itemTreshold; } set { SetProperty(ref _itemTreshold, value); } } //... code left out for simplicity public ItemsViewModel() { ItemTreshold = 1; } |
1 | RemainingItemsThreshold="{Binding ItemTreshold}" |
1 | public Command ItemTresholdReachedCommand { get; set; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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; } } |
if (items.Count() == 0)
ItemTreshold = -1;
Causing the collection view to stop calling our command in search of new pages to add.Here is the source code for this tutorial.
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
Recent Comments