Listview and Collection View

The CollectionView is a flexible and performant view for presenting lists of data using different layout specifications.

BUT The ListView is an ItemsView that displays a collection of data as a vertical list.

Conclusion: if you want to display things vertically use ListView, if you want do display things with your own style use CollectionView

ListView is a view for presenting lists of data, especially long lists that require scrolling. The CollectionView is a flexible and performant view for presenting lists of data using different layout specifications.

CollectionView is a view for presenting lists of data using different layout specifications. It aims to provide a more flexible, and performant alternative to ListView. For more information, see Xamarin.Forms 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.

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:

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:

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.

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. 

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×