Bye Bye ListView, Welcome CollectionView

Every time we need to present a list of data in our apps, we use a component called ListView. This component does what we want but its performances are very bad, epsecially as it doesn’t support virtualization.

Luckily with Xamarin.Forms 4.3 we can now use a new component called CollectionView. It does exactly the same thing as a ListView but way better and with better performances.

I definitely suggest you to check your projects and replace your ListViews with the new shiny CollectionViews. I’ve done in in all my projects, it doesn’t require a lot of effort and the performances are definitely better. So do it! I’ll now show you how to do it. I’ve create a repository on GitHub with this example. You can find the link at the end of the post.

In the past we had ListViews…

Until version 4.3 to add a ListView we could add a code like this:

<ListView x:Name="MyListView"
           ItemsSource="{Binding MyItems}">
   <ListView.ItemTemplate>
       <DataTemplate>
           <TextCell Text="{Binding Name}" />
       </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

What we have done is to add a ListView to our page called MyListView (naming an object is not mandatory as ideally using correctly MVVM you don’t have to use this name).

Then we have assigned some data to our list using the ItemsSource. MyItems is an ObservableCollection declared into the ViewModel associated.

After we have associated some Data to the ListView we have to show how they should appear. To do this, we can use the ItemTemplate property. There are standard DataTemplate that we can use with ListView and in this case we are going to use TextCell that is just a text. You can see it in the previous XAML code. Of course you can use all the other available DataTemplate or you can create every custom view you want. In the case of the previous XAML, the result is this:

ListView example
ListView example

…now we have CollectionViews

From Xamarin.Forms 4.3 we can now use the CollectionViews.

CollectionView is an improved component that will give you more control and better performances (much better performances).

There are few differences between ListView and CollectionView but most of the times, the transition from ListView to CollectionView is incredibly easy as we can see in the next XAML code. Here we are going to replace the ListView of the previous example with a CollectionView:

<CollectionView x:Name="MyCollectionView"
                ItemsSource="{Binding MyItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

As you can see there are not many changes. First of all, you have to replace ListView with CollectionView. Same as for the ItemTemplate, replace ListView.ItemTemplate with CollectionView.ItemTemplate.

As you have probably noticed, there is a small difference. For the ListView as DataTemplate we used the TextCell, but this is not available anymore with CollectionViews so we have to write our own view. As we need to show only a text, what we can do is replace the TextCell with a Label.

//From this
<TextCell Text="{Binding Name}" />
//To this
<Label Text="{Binding Name}" />

Now let’s show how the page appears after these small changes:

CollectionView example
CollectionView example

As you can see graphically there are not many differences (but I’d say that the CollectionView appears nicer) but from a performances point of view, the differences are massive,e specially if you are going to add many items to your list.

Conclusion

I really encourage you to replace your ListViews with CollectionViews. It’s probably a matter of minutes but it will improve a lot the performances of your app.

The link for the example showed on this article is:

https://github.com/marcojak/TestCollectionView

As usual if you have any questions, leave a comment and I’ll reply as soon as possible. And if you want more info about CollectionViews and its new features or MVVM (Model-View-ViewModel) let me know and I’ll add some post