Post
Ask Question

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.
 
Xamarin Forms 4.0
 

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.
 
Xamarin Forms 4.0
 
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.
 
Xamarin Forms 4.0
 
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.
 
Xamarin Forms 4.0
 
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.
  1. <CollectionView  ItemsSource="{Binding Stores}"  
  2.                                  VerticalOptions="Center"   
  3.                                  HorizontalOptions="Center"   
  4.                                  BackgroundColor="#F9F9F9"  
  5.                                  EmptyView="No items match your filter."  
  6.                                  Margin="10">  
  7.                     <CollectionView.ItemsLayout>  
  8.                         <GridItemsLayout Orientation="Vertical" Span="2"/>  
  9.                     </CollectionView.ItemsLayout>  
  10.                     <CollectionView.ItemTemplate>  
  11.                         <DataTemplate>  
  12.                             <StackLayout Padding="10">  
  13.                                 <Frame BorderColor="LightGray" CornerRadius="15" HasShadow="True" Padding="5">  
  14.                                     <Grid Padding="5" ColumnSpacing="0" RowSpacing="0" Margin="2">  
  15.                                         <Grid.RowDefinitions>  
  16.                                             <RowDefinition Height="Auto"/>  
  17.                                             <RowDefinition Height="130"/>  
  18.                                             <RowDefinition Height="Auto"/>  
  19.                                             <RowDefinition Height="Auto"/>  
  20.                                         </Grid.RowDefinitions>  
  21.                                           
  22.                                         <Image  Grid.Row="0"   
  23.                                                Source="{StaticResource favorite}"  
  24.                                                Aspect="AspectFit"   
  25.                                                HorizontalOptions="End" >  
  26.                                             <Image.Behaviors>  
  27.                                                 <behaviors:ViewTappedButtonBehavior Command="{Binding OnLoginCommand}"  
  28.                                                         AnimationType="Scale"/>  
  29.                                             </Image.Behaviors>  
  30.                                         </Image>  
  31.                                           
  32.                                         <Image Grid.Row="1" Source="{Binding ImageUrl}" Aspect="Fill"/>  
  33.                                         <Label Grid.Row="2" Text="{Binding Title}" TextColor="#14B7F8" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand"/>  
  34.                                         <Label Grid.Row="3" Text="{Binding Price, StringFormat='${0:N}'}}" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" FontAttributes="Bold"/>  
  35.   
  36.                                     </Grid>  
  37.                                 </Frame>  
  38.                             </StackLayout>  
  39.                         </DataTemplate>  
  40.                     </CollectionView.ItemTemplate>  
  41.                 </CollectionView>  
Here is the C# code for adding the list items and showing the list.
  1. public List<Store> storelist;  
  2.         public StorePage()  
  3.         {  
  4.             InitializeComponent();  
  5.             BindingContext = new MonkeysViewModel();  
  6.             storelist = new List<Store>();  
  7.             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" });  
  8.             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" });  
  9.             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" });  
  10.             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" });  
  11.             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" });  
  12.             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" });  
  13.             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" });  
  14.             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" });  
  15.             CV.ItemsSource = storelist;  
  16.         }  
This is the model code to add and set the property.
  1. public class Store  
  2. {  
  3.     public int Id { get; set; }  
  4.     public bool IsLike { get; set; }  
  5.     public string ImageUrl { get; set; }  
  6.     public string Title { get; set; }  
  7.     public double Price { get; set; }  
  8.     public string Favorite { get; set; } = "favorite.png";  
  9. }  
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,
  1. <CollectionView.EmptyView>  
  2.                         <Label Text="No items match your filter."/>  
  3. </CollectionView.EmptyView>  
OR use direct in,
  1. <CollectionView  ItemsSource="{Binding Stores}"  
  2.                                  VerticalOptions="Center"   
  3.                                  HorizontalOptions="Center"   
  4.                                  BackgroundColor="#F9F9F9"  
  5.                                  EmptyView="No items match your filter."  
  6.                                  Margin="10">  
You can customize this view as you like, including interactive content and supporting bindings.
 
Happy Xamarin Coding.....


Similar Articles