ItemAppearing to the Rescue

In Xamarin.Forms it is actually extremely easy if you just subscribe to the ItemAppearing event in your code and check to see if the item that was visible is the last item in the list. I prefer to have a unique Id on each item that I would be checking here, but for this sample I will just check the string which is unique.

If you are looking to implement this in a traditional apps it is pretty simple as well. On iOS you already have the DataSource that you can look into when GetCell is called. On Android you can actually tie into the scroll events like I do in Meetup Manager.

I am working out of my Xamarin.Forms-Monkeys project that I have blogged about before, which consists of a nice list of Monkeys with Images. You can browse this code on my GitHub.

Bindable Group Structure

There are a few examples of using headers with Xamarin.Forms, but I wanted to create an ultimate “Group” that would allow me to sort, organize any data, and that is when I came up with Grouping:

Grouping seems simple, but is very extensible, especially if using data binding. Notice that a Grouping is really just an ObservableCollection of type T. However, each Grouping also has a Key. Now this key is of type K, which means it could be anything including a complex data structure. This means you could in theory bind your header to a data structure of K and then bind multiple controls to multiple properties, which is very cool. For this example though we will just make K a string for sorting.

Sorting Our Monkeys

Before we get to our Monkeys we will create a new new public ObservableCollection<Grouping<string,Monkey> > MonkeysGrouped{get;set;} in our ViewModel. The reason for this is that we actually have multiple lists, which is a list of a list of grouped monkeys. Then we will add a new property to our monkey that we can use for sorting, which will be a name sort property:

And now we can sort our list of Monkeys in our view model, which we will set as the ItemsSource on our list view:

Enabling Headers

Enabling headers is very simple. There are a few properties to set on the ListView itself to get things going. First is to enable grouping, and then to set the property that the headers will bind to:

list.ItemsSource = viewModel.MonkeysGrouped;
list.IsGroupingEnabled = true;
list.GroupDisplayBinding = new Binding("Key"); //this is our key property on grouping.

Jump List

Of course, we could stop there, but what fun would that be, as we can add a jump list with just a single line of code:

list.GroupShortNameBinding = new Binding("Key");

This results in a nice jump list:

Custom Headers

Let’s take it one step further and implement our own custom header cell with a nice background color. Right now our Key, K, is only a string, but we could pass in a full data structure if we wanted to make the custom view more complex and bind to multiple pieces of information.

My HeaderCell is very simple and just contains a Label, which binds to Key and I am placing it inside of a StackLayout with a bit of custom padding and a background color. It should be noted that I am setting a fixed Height of 25 here as the Xamarin.Forms ListView needs to know what to render.

The last thing to do is to update the the ListView with this new template:

if(Device.OS != TargetPlatform.WinPhone)
  list.GroupHeaderTemplate = new DataTemplate(typeof(HeaderCell));

list.HasUnevenRows = true; //you might want to enable if using custom cells.

We don’t set it on Windows Phone because the default styling is standard on Windows Phone with accent colors. However, you can customize it here as well. Here is our outcome on all three platforms:

XAML?

As Charles Petzold would say… Show me the XAML! Of course it is just as easy, as all we need to do is bring over our updated ViewModel and Grouping and create the rest all in XAML:

Conclusion

It is extremely easy to not only customize your cells in your ListView, but also add rich functionality like list sorting with group headers with just a few lines of shared C# code with Xamarin.Forms!

On Twitter this morning I was asked how I would take my Xamarin.Forms Monkey’s and put the images on the right hand side:

So @JamesMontemagno is there a way of making the image display on the right hand side of the cell using your example?
https://t.co/o2GrvQ3r14

— Matt Sutherland (@mattsuths) August 4, 2014

The task was laid out, so I went to work on creating a new custom cell in XAML. The same code just needs to be translated over to C# if you are creating your app in the code behind.

The first thing is that I needed to remove my old TextCell that was in the DataTemplate and add a new base ViewCell. With the ViewCell in place it acts almost like any other “Page”, in that it has Content where you can lay down your controls. For this I am going to use a nice Grid control with 2 rows and 2 columns.

We will notice a few things of importance, which is that I set the rows height to 55, set the padding to 5 on the Grid, and made sure the image as 40x40. Here is the result:

This is just a quick example of how to add a custom ViewCell to your ListViews. The full source code for the Monkeys example is on my GitHub: https://github.com/jamesmontemagno/Xamarin.Forms-Monkeys