LAC09 – A Xamarin.Forms Infinite Scrolling ListView

9 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 9 9 Flares ×

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:

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:

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.

,

  • A4w

    Love the solution… however there is another solution – use a virtualizing observable collection. That way you don’t have to do any fancy stuff.. (clean MVVM is always good). See https://www.nuget.org/packages/VirtualizingObservableCollection/ for an example..

  • Plamen 태권도 Yovchev

    Hey Matt,

    Create Generic is obsolete, From the Xamarin team said that they will remove it soon. Do you have something updated which will work without Generic Create?

    • I’m afraid not – I dont currently have anything running in Xamarin

    • James Parker

      public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create(“LoadMoreCommand”, typeof(ICommand), typeof(InfiniteListView), default(ICommand));

    • James Parker

      public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create(“LoadMoreCommand”, typeof(ICommand), typeof(InfiniteListView), default(ICommand));

  • Umut Bayğut

    Hello , thanks for solution . I want to ask something. How we can show in listview diffrent object. Example ItemsSource=”{Binding MarvelCharacters}” for this ı want to show in row picture and Title (thinks news page). How can I this ?

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
9 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 9 9 Flares ×