Collection View(Xamarin Forms 4.0 Pre)

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 we check the xamarin forms version is updated or not if the package does not update so we are updating package, these are the step for update package. 

Firstly we select the solution and right click o the solution and then select the Nuget package like showing in this below screen.

Now here appear a new window this page contains the information whose package is used in this project. Now you can select update tab, In this list is shown all the older version packages, so you can search package name xamarin forms and then you select package then checks all the project(Core, Android, and ios) update your package.

Now if you want to use the collection view in our project so you will make sure to initialize the in (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 (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 layout. In this Example, we create a List of Store Items names in your binding context and then bind to it in XAML:

Now Coding time:

<Collectionview backgroundcolor="#F9F9F9"
     Emptyview="No items match your filter."
     Horizontaloptions="Center" Itemssource="{Binding Stores}" 
     Margin="10" Verticaloptions="Center">  
 <Collectionview .itemslayout="">  
 <Griditemslayout orientation="Vertical" span="2">  
         </Griditemslayout></collectionview>  
         <Collectionview.Itemtemplate>  
             <Datatemplate>  
                 <Stacklayout Padding="10">  
                     <Frame Bordercolor="LightGray" cornerradius="15" 
                               Hasshadow="True" Padding="5"></frame>  
                         <Grid Columnspacing="0" 
                                  Margin="2" padding="5" 
                                  Rowspacing="0">  
                            <Grid.RowDefinitions>  
                               <Rowdefinition Height="Auto">  
                               <Rowdefinition Height="130">  
                               <Rowdefinition Height="Auto">  
                               <Rowdefinition Height="Auto">  
                            </Grid.RowDefinition> 
                            <Image Aspect="AspectFit" Grid.Row="0" 
                                Horizontaloptions="End" 
                                Source="{StaticResource favorite}"> 
                                <Behaviors:viewtappedbuttonbehavior 
                                    Animationtype="Scale" Command="{Binding OnLoginCommand}">  
                                   </Behaviors:viewtappedbuttonbehavior></image>  
                                </Image>  
                            <Image Aspect="Fill" grid.row="1" 
                                Source="{Binding ImageUrl}">  
                            <Label Grid.row="2" 
                                Horizontaltextalignment="Center" 
                                Text="{Binding Title}" 
                                Textcolor="#14B7F8" 
                                Verticaloptions="CenterAndExpand"/>  
                            <Label Fontattributes="Bold" 
                                Grid.row="3" horizontaltextalignment="Center" 
                                Text="{Binding Price, StringFormat='${0:N}'}}" 
                                Verticaloptions="CenterAndExpand"/>  
                             </grid>  
                            </Stacklayout>  
                        </Datatemplate>  
                    </Collectionview>  
                </Collectionview>

and here is C# code adding the list items and show the list,

 public List storelist;  
 public StorePage()  
 {  
 InitializeComponent();  
 BindingContext = new MonkeysViewModel();  
 storelist = new List();  
 storelist.Add(new Store() { Id = 1,
ImageUrl = "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 = "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 = "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 = "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 = "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 = "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 = "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 = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 120500.00, Title = "Title" });  
            CV.ItemsSource = storelist;  
        }  
 

and this is model code for 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 it is almost like the ListView you’ve used in the older xamarin forms. Let’s look now at what else it can we do.

It’s so Empty in Here

 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 for just this purpose. With the XAML 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 you want to like, including interactive content and supporting bindings.

 and happy xamarin Coding.....