Correct Use of Data binding with ListView & CollectionView in Xamarin.Forms

It’s a view on which we display our list of data in a scrollable format.

The ListView class does not support the definition of list items in the XAML file, for that, we use ItemsSource property or data binding method with an ItemTemplate to define the items in ListView.

ListView is best for the collection which contains the data that have the same type.

 

Components

1.Headers and Footers:

These components are used to display any content at the beginning and the end of the list.

It separates that content from the actual data.

These components can be bound to ListView using a different data source from ListView’s data source.

2.Groups:

Groups are used for easy navigation within the list and are generally data-bound.

3.Cells:

Data items in a ListView are referred to as cells and each one of them corresponds to a single row of data.

There are built-in and custom cells available in Listview.

Built-in cells are can be TextCell to display any text or can be ImageCell that displays an image on left with some text also.

Custom cells are used to display some complex data.

 

ListView Customization:

It can be customized in three different ways:

1.Using TextCell:

Whenever we require master-detail information then we use TextCell for the customization.

2.Using ImageCell:

Along with master-detail information when we require an image to be displayed, we use ImageCell for customization.

3.Using ViewCell:

Other than using ImageCell and TextCell, when any user-specific requirement exists then we can use ViewCell for customization.

Example: Model: Flower.cs

using System;
using System.Collections.Generic;
using System.Text;
namespace LVDemo.Model
{
    public class Flower
    {
        public string Name {get; set;}
        public string Category {get; set;}
        public string Desc {get; set;}
        public string ImageUrl {get; set;}
        public List GetFlowers()
        {
            List flowers= new List()
            {
                new Flower() { Name="Cosmos", Category="Small", Desc="Small Flowers",           ImageUrl="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1606704469806-55aff12c67c4%3Fixid%3DMnwxMjA3fDB8MHxzZWFyY2h8NHx8c21hbGwlMjBmbG93ZXJzfGVufDB8fDB8fA%253D%253D%26ixlib%3Drb-1.2.1%26w%3D1000%26q%3D80&imgrefurl=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fsmall-flowers&tbnid=VDFDhHyRmXLzVM&vet=12ahUKEwijvZSCp_bwAhURwzgGHWZrA9IQMygHegUIARDrAQ..i&docid=oEozVU2zVOWLSM&w=1000&h=1500&q=small%20flowers%20images&ved=2ahUKEwijvZSCp_bwAhURwzgGHWZrA9IQMygHegUIARDrAQ"},
                new Flower() { Name="Sunflower", Category="Big", Desc="Big Flowers" , ImageUrl="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.almanac.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Famp_metadata_content_image_min_696px_wide%2Fpublic%2Fimage_nodes%2Fsunflower-1627193_1920.jpg%3Fitok%3Dz0U222mG&imgrefurl=https%3A%2F%2Fwww.almanac.com%2Fplant%2Fsunflowers&tbnid=YOZN0ISBxjRugM&vet=12ahUKEwjSvJn1p_bwAhUQtmMGHSXLBiQQMygBegUIARDdAQ..i&docid=5RO-6jMSTksnoM&w=696&h=464&q=sunflower%20images&ved=2ahUKEwjSvJn1p_bwAhUQtmMGHSXLBiQQMygBegUIARDdAQ"}
            };
            return flowers;
        }
    }
}

										

View: FlowerView.xaml

App.xaml.cs

public App()
{
   InitializeComponent();
   //MainPage = new MainPage();
   MainPage = new FlowerView();
}
										

CollectionView is a view in which the data can be displayed in a list type using different types of layout specifications.

Its goal is to produce a more flexible and performant alternative to ListView.

It can be used when the data are needs to be scrollable or can be selectable.

CollectionView is available after version 4.3 of Xamarin and is fully available in Android & IOS but partially available in UWP (Universal Windows Platform).

Data:

Data in CollectionView is displayed by using the ItemsSource property of the collection that implements the IEnumerable interface.

The appearance of every item is defined by the ItemTemplate property of DataTemplate in the list.

Layout:

The data in the CollectionView can be displayed in Vertical as well as Horizontal Lists and Grids.

The default layout of CollectionView is Vertical List.

Selection:

Selection is the process of selecting one or more items from the list of CollectionView.

However, in CollectionView the selection function is disabled by default but manually single and multiple selections can be enabled.

Empty Views

The CollectionView can also display the empty views that give feedback to the users when there is no data to be displayed in the CollectionView.

The empty view can be a string, a view, or can be multiple views to be shown.

Groups

The group is the same as that of ListView here but the items here are grouped by setting the property IsGrouped to True.

Selection

When the user hits to initiate scroll, the end location of the scroll can be controlled so that the items can be displayed fully when there are items more than the layout size.

In CollectionView there are two ScrollTo methods available that scrolls the items to view.

One overload scrolls the item of the list to the specified index of the list into view and the other scrolls the item into view.

Example: Model: Product.cs

using System;
using System.Collections.Generic;
using System.Text;
namespace CV_Demo.Model
{
    class Product
    {
        public string ProductName {get; set;}
        public decimal Prize {get; set;}
    }
}

										

Service: ProductService.cs

using System;
using System.Collections.Generic;
using System.Text;
using CV_Demo.Model;
namespace CV_Demo.Service
{
     class ProductService
    {
        public List GetProductsList()
        {
            return new List
            {
                new Product(){ ProductName="Mobiles" , Prize=15000 },
                new Product(){ ProductName="TV's" , Prize=25000 },
                new Product(){ ProductName="Laptops" , Prize=30000 }
            };
        }
    }
}

										

View: ProductView.xaml

ViewModel: ProductViewModel

using System;
using System.Collections.Generic;
using System.Text;
using CV_Demo.Model;
using CV_Demo.Service;
namespace CV_Demo.ViewModel
{
    class ProductViewModel
    {
        public List Products{ get; set; }
        public ProductViewModel()
        {
            Products = new ProductService().GetProductsList();
        }
    }
}

										

App.xaml.cs:

public App()
{
InitializeComponent();
       //MainPage = new MainPage();
MainPage = new NavigationPage(new ProductView());
}