A Xamarin.Forms Infinite Scrolling ListView

from:http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/

The last few months have been crazy busy working on ItsMonkie Solutions, whether it be website rework, defining the value proposition or outreach emails, I’ve had very little time and as such Codenutz.com and the Live App Challenge has suffered. I don’t want to bore you by writing about my work schedule here, but I will be producing articles here on Codenutz with greater consistency, but lower frequency.

Anyway I’ve been hitting Xamarin.Forms pretty hard over the last few weeks with some okay results. I have to be totally honest, its been a rocky ride – the documentation isn’t brilliant, there are bugs, the updates often introduce new bugs and the framework itself sometimes feels a little bit lacking, albeit constantly improving.

Xamarin.Forms Extensibility

The really great thing about Xamarin.Forms is that its pretty extensible, and adding features isn’t too complicated by adding custom renderers, and / or extending existing controls.

I thought the best way to demonstrate this was create a really trivial example

Xamarin.Forms Infinite ListView

To demonstrate a really basic example of this I created a simple infinite scrolling listview and demo project on GitHub:

https://github.com/mattwhetton/Codenutz.XF.InfiniteListView

The code is incredibly simple, and the solution contains demo projects for how to use it.

What does it do

One of the first things that I really wanted in Xamarin.Forms was an infinite scrolling ListView, i.e. a ListView control that could theoretically keep going and going, dynamically loading the content as it needed to. It also really had to be MVVM and XAML friendly – the MVVM pattern is incredibly useful for writing cleanly separated user interfaces, but thats for another day!

How does it work

I implemented this by simply sub classing the built in ListView and adding in a few hooks:

 

 

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

public class InfiniteListView : ListView {     public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create<InfiniteListView,ICommand>(bp => bp.LoadMoreCommand, default(ICommand));       public ICommand LoadMoreCommand     {         get { return (ICommand) GetValue(LoadMoreCommandProperty); }         set { SetValue(LoadMoreCommandProperty, value); }     }       public InfiniteListView()     {         ItemAppearing += InfiniteListView_ItemAppearing;     }       void InfiniteListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)     {         var items = ItemsSource as IList;           if (items != null && e.Item == items[items.Count - 1])         {             if(LoadMoreCommand != null && LoadMoreCommand.CanExecute(null))                 LoadMoreCommand.Execute(null);         }     } }

The basic idea behind this control is to expose a bindable command called LoadMoreCommand. This command fires whenever the last item in the listview appears. This was achieved using the readily available ItemAppearing event.

How do you use it

The concept is pretty straight forward, you add an InfiniteListView to your page, bind up the ItemsSource to an ObservableCollection on your ViewModel and also a command that instructs your ViewModel to load more content. Here’s a snippet from the XAML in my sample project:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="utf-8" ?>     <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"         xmlns:Controls="clr-namespace:Codenutz.XF.Controls;assembly=Codenutz.XF.Controls.InfiniteListView"         x:Class="Codenutz.XF.InfiniteListView.Shared.View.InfiniteListViewSampleView"         Title="{Binding Title}">       <Controls:InfiniteListView         ItemsSource="{Binding MarvelCharacters}"         SelectedItem="{Binding SelectedCharacter}"         LoadMoreCommand="{Binding LoadCharactersCommand}">     </Controls:InfiniteListView>          </ContentPage>

Here I’m simply binding the ItemsSource to a MarvelCharacters observable collection (yeah, its always comics!), and the LoadMoreCommand to a LoadCharacters command. Ignore the SelectedItem part – thats just for fun!

When the view model initially loads it fetches the first 50 characters from the repository (there are thousands hard coded in the sample). When the load more command is triggered the view model simply loads the next 50.

Demo

Here’s a really simple demonstration of what this looks like on an iPhone 6 simulator:

The example is trivial, but nicely represents how easy this kind of thing is to achieve with a little bit of work extending the Xamarin.Forms controls.

Wrapping up

The full source code for this example is available on Github so if you want more detail feel free to dig in.

I hope to bring a lot more on the Xamarin front, and will hopefully get some useful posts out. If you have any questions or suggestions about post topics, I’d love to hear them.