Make your life simpler with the CollectionView’s Layouts

CollectionView allows us display a list of data. It’s very similar to the ListView but this control enhances the performance and memory management of the list and covers different layout presentations such as: Vertical, horizontal and grid, making it a lot better and saving us our precious development time. This control is available from the version of Xamarin Forms 4.0.

In this post, we will learn the following topics:

What do I need to do to start

Layout types

    Vertical and Horizontal lists

    Vertical and Horizontal Grids

Handling an empty CollectionView

Having it clear… What do I need to start? ?

First of all, let me tell you that CollectionView in an Experimental view, that’s why we need to put it available both Android and IOS. Just adding the following code just before calling Forms.Init() in your MainActivity.cs and in your AppDelegate.cs.

Forms.SetFlags("CollectionView_Experimental");

view raw CollectionViewSample.xaml hosted with by GitHub

A quick reminder of what is an Experimental preview!

A experimental preview, as their name suggests, are functions or libraries from preview versions of Xamarin.Forms available for experimental purposes and you need to indicate that you want to enable it. If you want to know more information about it, you can enter here.

Let’s start!!!

Layout Types

CollectionView provide to us different layout that allows us to display the data in a funnier way! Let’s know one by one!

Vertical and Horizontal lists

Knowing the structure

As we showed above, both horizontal and vertical list, used the same structure, you just must to specify in the ItemLayout property which one do you want to implement.

It’s very important to always add the HeightRequest property because if we do not, the CollectionView will not be visible on the screen.

Let’s create an example

To create it and every example in this post, I used the MVVM pattern to fill the control with data. You can see more information about this topics here.

	<StackLayout Margin="20,50">
	<CollectionView
	ItemsSource="{Binding countries}"
	VerticalOptions="StartAndExpand"
	ItemsLayout="HorizontalList"
	HeightRequest="150" >
	<CollectionView.ItemTemplate>
	<DataTemplate>
	<Grid Padding="10">
	<Grid.RowDefinitions>
	<RowDefinition Height="*" />
	<RowDefinition Height="*" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Image Grid.RowSpan="2"
	VerticalOptions="CenterAndExpand"
	Source="{Binding Image}"
	Aspect="AspectFit"
	Grid.Column="0"
	HeightRequest="125"
	WidthRequest="125"/>
	<Label Grid.Column="1"
	Margin="20,0"
	VerticalOptions="CenterAndExpand"
	Text="{Binding Name}"
	FontAttributes="Bold" />
	<Label Grid.Row="1"
	Margin="20,0"
	VerticalOptions="StartAndExpand"
	Grid.Column="1"
	Text="{Binding Continent}" />
	</Grid>
	</DataTemplate>
	</CollectionView.ItemTemplate>
	</CollectionView>
	</StackLayout>

view raw CollectionViewSample.xaml hosted with by GitHub

Vertical and Horizontal Grids

Know the structure

Let’s create an example

	<StackLayout Margin="7,50">
	<CollectionView ItemsSource="{Binding countries}"
	HeightRequest="350">
	<CollectionView.ItemsLayout>
	<GridItemsLayout Orientation="Horizontal"
	Span="3" />
	</CollectionView.ItemsLayout>
	<CollectionView.ItemTemplate>
	<DataTemplate>
	<Grid Padding="10">
	<Grid.RowDefinitions>
	<RowDefinition Height="35" />
	<RowDefinition Height="35" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="70" />
	<ColumnDefinition Width="140" />
	</Grid.ColumnDefinitions>
	<Image Grid.RowSpan="2"
	Source="{Binding Image}"
	Aspect="AspectFill"
	HeightRequest="60"
	WidthRequest="60" />
	<Label Grid.Column="1"
	Text="{Binding Name}"
	FontAttributes="Bold"
	LineBreakMode="TailTruncation" />
	<Label Grid.Row="1"
	Grid.Column="1"
	Text="{Binding Continent}"
	LineBreakMode="TailTruncation"
	FontAttributes="Italic"
	VerticalOptions="End" />
	</Grid>
	</DataTemplate>
	</CollectionView.ItemTemplate>
	</CollectionView>
	</StackLayout>

view raw CollectionViewSample.xaml hosted with by GitHub

Handling an empty CollectionView

We can encounter the event that our CollectionView does not have any data available, so it’s good to handle this so that our users are always kept visually informed of what’s happening in our application. We can two way to do it! Let’s learn!

We get it just adding the EmptyView property in our Collection View declaration. It receives a String value.

	<CollectionView ItemsSource="{Binding countries}"
	EmptyView="No data available"
	HeightRequest="350">
	</CollectionView>

view raw CollectionViewSample.xaml hosted with by GitHub

. To your CollectionView normal structure add <CollectionView.EmptyView> tags and inside it add you UI design code, just as in the following image:

And voila!!! ? Our CollectionView is implemented!

Thanks for reading !!!

Spanish post: https://medium.com/@reyes.leomaris/conociendo-los-layout-del-collectionview-7e7a74483dcd

References: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout?WT.mc_id=DT-MVP-5003353