A (r)evolution for displaying data: Xamarin.Forms CollectionView

This entry is part of the Xamarin UI July initiative led by Steven Thewissen. Check this publication and several other interesting blog posts written by the Xamarin community members with special focus on UI, an important element when developing a mobile application.  

When you need to display a long list of elements in a mobile app that you are developing with Xamarin.Forms, ListView is most probably your first choice to handle the situation. This UI element has been around for quite some time, and while it is quite useful and has been improved with cool capabilities such as pull-to-refresh, context actions, grouping, and many others, CollectionView is a revolution for (and an evolution of!) ListView, especially if heterogeneous data (multiple layouts, data orientation -horizontal/vertical-) are in your app roadmap.

Almost three months ago, the Xamarin Blog published an interesting call to action to developers for testing and sending feedback about the CollectionView control. There were around 40 submissions for this challenge, with complex and great layouts from the community. Furthermore, their feedback was constructive and proactive (Xamarin community is awesome!).

While CollectionView is still in preview in the current state of Xamarin.Forms 4.0, this element certainly adds performance and flexibility to the UI equation. Moreover, you don’t have to write too many lines of code to get a nice view of your data. In this blog post, I’m going to showcase some functionality and properties from this control, hoping that this is useful for you.

Getting started

The first step is to update your Xamarin.Forms Nuget package to version 4.0, since CollectionView is available from this version. In addition to that, add this line before calling Forms.Init in your AppDelegate (iOS) and/or in the MainActivity (Android) class:

Your very first CollectionView

Well, that was easy, right? Now let’s move to something also really simple: Adding a CollectionView to present some data. For this example, I’m using the Pokédex entries from my CollectionView challenge submission.

As you can see, it is quite similar to what you would do for a ListView. You just set the ItemsSource property to indicate the set of elements that is bound to the element and then you define the ItemTemplate element (it’s just a DataTemplate) to define the appearance of your data.  This is all you need at minimum! (However, in the example I also added a few styles to improve the appearance).

Let’s take a look at how the data is displayed:

Second example: An empty view

This is something I really adore about CollectionView. There is a built-in empty view implementation that you can customize with a DataTemplate. For instance, let’s show no data when the page loads and present a message/some instructions to the user (we will use the button to retrieve the results instead):

How does it look?

As you can see, CollectionView is quite an interesting UI element. What else we can do with it?

Third example: Implementing search and scroll navigation

Sometimes the user wants to look for an specific item easily. A search bar is a great help for this purpose. What if you’d preserve the whole items collection (instead of just showing the results of the query) but point yout user right to the element that they are looking for? This is possible thanks to the ScrollTo property. Let’s see. First of all, we implement the following XAML:

Then let’s take a look at its code-behind:

The ScrollTo method from the CollectionView element actually scrolls the list (if the animation is set to true) and navigates to the indicated result element from the collection in a fancy way. Of course, the SearchScrollPokemon from the view model simply returns the first coincidence in a Pokemon’s name. You can also set the position of the navigated item (top, bottom, center).

This is how it looks like:

Fourth example: Two columns layout

Do you want to present your data in columns? CollectionView has got you covered! All you need is to set the ItemsLayout property indicating that you need a GridItemsLayout with Vertical (or Horizontal) orientation with a Span of N columns (or rows). For instance, take a look at this XAML code:

The output is simply breaththaking:

A final example: Two horizontal lists (same template)

It is quite common that your app needs to show two collections, and horizontal layouts are a great help especially due to space constraints. By using the ItemsLayout property, this is a no-brainer. Plus, we can share the DataTemplate that is used for presenting the data! (in the ItemTemplate). This is amazing, since we don’t have to define the template every time!

As you can see, the DataTemplate is defined as a ContentPage Resource. A Style is also set for the two collection views. The only difference is the set of elements that each one is displaying.

And this is the result:

As you can see, CollectionView is a flexible UI that has been introduced in Xamarin.Forms 4.0. With minimum code you can have great, performant implementations if you need to display data. I didn’t talk too much about it, but the data (around 700 items) is quickly displayed.

Thank you for your visit and for reading this entry. Don’t forget to take a look at my GitHub repository, where you will find the complete source code of this project.

See you next time, and enjoy Xamarin UI month!