Xamarin.Forms 4.0 Collection View

In this article, I will be explaining a new feature of Xamarin.Forms 4.0 - a new control called Collection View. This is an awesome control that can be used with different types of views, like horizontal list view, listing with 2 span and others.

Collection View is an example of listview for listing items. It improves inventory design and reduces complexity. Collection View control is very flexible.

Implementation

First, we have to create a project with the name CollectionViewApp.

Open VS2017 >> select file >> Create Project >> give the name to the project "CollectionViewApp". Then, set the path and press Enter.

Now, let's check if the Xamarin.Forms version is updated or not. If the package is not updated, we need to update the package. These are the steps for updating the package.

Firstly, we select the solution and right-click on it. Then, select the NuGet package, as shown in the below screen.

Now, there appears a new window. This page contains information about the packages used in this project. Select the "Update" tab. In this list, all the old packages are shown. You can search for a package named Xamarin.Forms and check all the projects (Core, Android, and iOS) to update your package.

Now, if you want to use the Collection View in your project, make sure to initialize the (Xamarin Android) MainActivity.cs and (Xamarin iOS) AppDelegate.cs project.

Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

If you want to update an existing project to the Xamarin.Forms 4.0 - NuGet package is available via your favorite NuGet package manager.

A Basic Layout

In Xamarin.Forms 4.0 review, one of the biggest changes between ListView and CollectionView is the removal of wrapping content in a ViewCell. This allows for significant gains to performance.

Below is an example.

In this example, we create a List<Store> of Stored Item names in our binding context and then bind to it in XAML.

Now, it is coding time.

<CollectionView ItemsSource="{Binding Stores}"
VerticalOptions="Center"
HorizontalOptions="Center"
BackgroundColor="#F9F9F9"
EmptyView="No items match your filter."
Margin="10">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Frame BorderColor="LightGray" CornerRadius="15" HasShadow="True" Padding="5">
<Grid Padding="5" ColumnSpacing="0" RowSpacing="0" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="130"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Source="{StaticResource favorite}"
Aspect="AspectFit"
HorizontalOptions="End" >
<Image.Behaviors>
<behaviors:ViewTappedButtonBehavior Command="{Binding OnLoginCommand}"
AnimationType="Scale"/>
</Image.Behaviors>
</Image>
<Image Grid.Row="1" Source="{Binding ImageUrl}" Aspect="Fill"/>
<Label Grid.Row="2" Text="{Binding Title}" TextColor="#14B7F8" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand"/>
<Label Grid.Row="3" Text="{Binding Price, StringFormat='${0:N}'}}" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" FontAttributes="Bold"/>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Here is the C# code for adding the list items and showing the list.

public List<Store> storelist;
public StorePage()
{
InitializeComponent();
BindingContext = new MonkeysViewModel();
storelist = new List<Store>();
storelist.Add(new Store() { Id = 1, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 21.00, Title = "Title" });
storelist.Add(new Store() { Id = 2, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 88.12, Title = "Title" });
storelist.Add(new Store() { Id = 3, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 65.21, Title = "Title" });
storelist.Add(new Store() { Id = 4, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 39.95, Title = "Title" });
storelist.Add(new Store() { Id = 5, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 958.99, Title = "Title" });
storelist.Add(new Store() { Id = 6, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 64.85, Title = "Title" });
storelist.Add(new Store() { Id = 7, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 2050.55, Title = "Title" });
storelist.Add(new Store() { Id = 8, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 120500.00, Title = "Title" });
CV.ItemsSource = storelist;
}

This is the model code to add and set the property.

public class Store
{
public int Id { get; set; }
public bool IsLike { get; set; }
public string ImageUrl { get; set; }
public string Title { get; set; }
public double Price { get; set; }
public string Favorite { get; set; } = "favorite.png";
}

Now, you have a simple list. This new CollectionView is almost like the ListView you’ve used in the older Xamarin.Forms.

Lastly, a common scenario many developers may face is what to display when the ItemsSource is empty. With the CollectionView, you can now set any content to the EmptyView of your list. With the XAML code mentioned below, the string “No items currently exist!” will be shown inside of the CollectionView when the list of people is empty,

<CollectionView.EmptyView>
<Label Text="No items match your filter."/>
</CollectionView.EmptyView>

OR use direct in,

<CollectionView ItemsSource="{Binding Stores}"
VerticalOptions="Center"
HorizontalOptions="Center"
BackgroundColor="#F9F9F9"
EmptyView="No items match your filter."
Margin="10">

You can customize this view as you like, including interactive content and supporting bindings.

Happy Xamarin Coding.....

7 Comments

Join the conversation! Your thoughts help the community grow.

hamid abdullsh6y ago
Hi Sumit, Can you give me a little bit idea about how to implement xamarin forms collectionview like in this picture with different heights and same spacing in each column: https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSZ6t4OKoNukTBFpt2oXkrW1amkZ9bOM_VcE-NwBuo7PtLx-bGC
Jay Crowe7y ago
Hi, Great article. Please can you explain how you have then filtered the collection view, as shown in the video at the top of the article?
Logesh Palani7y ago
Nice one Sumit !
nagesh vecha7y ago
Hello Sumith, How to give the spacing between the items in collection view. Thanks.
- Sumit Singh Sisodia7y ago
  You can use Padding or margin in your DataTemplate layout.
Rajanikant Hawaldar7y ago
super article
- Sumit Singh Sisodia7y ago
  Thanks, bro.