Xamarin.Forms - Cross-Platform ListView Control

In this tutorial, I am going to explain the cross- platform ListView control.

ListView is a view for presenting a list of data, especially the long list that requires scrolling. Xamarin.Forms provides ListView control that can be used for displaying scrollable lists of data. ListView supports context actions and data binding if you are following MVVM (Model View View Model) approach. ListView control is best for homogeneous data.

 

ListView has a number of components to implement the native functionality on each platform.

• Headers and Footers 
  To display at the beginning and at the end of the list.
  
  
• Groups 
  Data in a ListView can be grouped for easier navigation.
  
  
• Cells 
  Cells represent the row for each data being listed. There are built-in rows and you can even create your own custom rows according to your application's design requirement. 

Those readers who are not familiar with the process of project creation using Visual Studio, can follow the process explained on Xamarin official site. 

 

The following sample example explains the step by step implementation of a simple ListView Control to display the employee directory with their names and department grouped according to their names alphabetically.

 

Step 1

Create an Employee model class in PCL (Portable Class Library) and set the required properties for an employee.

 

Employee.cs

using System;
namespace ListViewDemo
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string FullName { get { return FirstName + " " + LastName; } }
        public string Department { get; set; }
    }
}

Step 2

Create a static DataSource file which will return a list of static data for the employees to bind in the ListView.

 

DataSource.cs 

using System;
using System.Collections.Generic;

namespace ListViewDemo
{
    public class DataSource
    {
        public static List<Employee> GetList()
        {
            var l = new List<Employee>();

            l.Add(new Employee() { FirstName = "Anderson", LastName = "Martin", Department = "Developer Evangelist" });
            l.Add(new Employee() { FirstName = "Adam", LastName = "Dev", Department = "Web Developer" });
            l.Add(new Employee() { FirstName = "Bob", LastName = "Harry", Department = "Customer Success Engineer" });
            l.Add(new Employee() { FirstName = "Brooke", LastName = "Clancy", Department = "Marketing" });
            l.Add(new Employee() { FirstName = "Bella", LastName = "Jo", Department = "Developer Evangelist" });
            l.Add(new Employee() { FirstName = "Charlie", LastName = "James", Department = "Director of Education" });
            l.Add(new Employee() { FirstName = "Carla", LastName = "Buckner", Department = "Product Manager" });
            l.Add(new Employee() { FirstName = "Dev", LastName = "Anand", Department = "CTO" });
            l.Add(new Employee() { FirstName = "Fried", LastName = "Hardy", Department = "CEO" });
            l.Add(new Employee() { FirstName = "Harry", LastName = "Jacob", Department = "COO" });
            l.Add(new Employee() { FirstName = "Hannah", LastName = "Icaza", Department = "Support" });
            l.Add(new Employee() { FirstName = "Michael", LastName = "Nikon", Department = "Database" });
            l.Add(new Employee() { FirstName = "Maria", LastName = "Shara", Department = "HR" });
            l.Add(new Employee() { FirstName = "Orla", LastName = "Jackson", Department = "Designer" });
            l.Add(new Employee() { FirstName = "Perry", LastName = "Butler", Department = "HR" });
            l.Add(new Employee() { FirstName = "Simons", LastName = "Foster", Department = "Developer" });
            l.Add(new Employee() { FirstName = "Timmy", LastName = "Niklas", Department = "Designer" });
            l.Add(new Employee() { FirstName = "Utham", LastName = "Nigam", Department = "Accounts" });
            l.Add(new Employee() { FirstName = "Valerie", LastName = "Xander", Department = "Developer" });
            l.Add(new Employee() { FirstName = "Zaccheus", LastName = "Bing", Department = "Testing" });

            return l;
        }
    }
}

Step 3

Create an observable group collection class to group the employees directory according to their First name, alphabetically.

 

ObservableGroupCollection.cs 

using System;
using System.Collections.ObjectModel;
using System.Linq;

namespace ListViewDemo
{
    public class ObservableGroupCollection<K,T> : ObservableCollection<T>
    {
        private readonly K _key;

        public ObservableGroupCollection(IGrouping<K, T> group)
            : base(group)
        {
            _key = group.Key;
        }

        public K Key
        {
            get { return _key; }
        }
    }
}

To understand the concept and use of observable group collection, refer to this article. 

 

Step 4

Create an XAML View page and bind the employee directory data to the ListView Control. 

 

EmployeeDirectoryView.xaml 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListViewDemo.EmployeeDirectoryView"
             BackgroundColor="White">

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
    </ContentPage.Padding>

    <ContentPage.Content>
        <StackLayout Spacing="0">
            <ListView x:Name="empListView"
                ItemsSource="{Binding}"
                GroupShortNameBinding = "{Binding Key}"
                GroupDisplayBinding = "{Binding Key}"
                IsGroupingEnabled = "true"
                HasUnevenRows="True"
                SeparatorVisibility="Default">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                    <StackLayout Spacing="2" Orientation="Vertical">
                        <Label Text="{Binding FullName}" FontSize="Medium" LineBreakMode="NoWrap" Margin="10,0,0,0"/>
                        <Label Text="{Binding Department}" FontSize="Small" LineBreakMode="NoWrap" Margin="10,0,0,0"/>
                    </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell Height="23">
                        <StackLayout BackgroundColor="#808080">
                            <Label Text="{Binding Key}"
                                   TextColor="White"
                                   FontSize="Small"
                                   VerticalOptions="CenterAndExpand"
                                   Margin="10,0,0,0"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

Step 5

Now, from the code behind file of XAML View page, we need to pass the grouped employee directory data to the ListView Control.

 

EmployeeDirectoryView.xaml.cs 

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using Xamarin.Forms;

namespace ListViewDemo
{
    public partial class EmployeeDirectoryView : ContentPage
    {
        public EmployeeDirectoryView()
        {
            InitializeComponent();

            var empList = DataSource.GetList();

            var groupedData =
                empList.OrderBy(e => e.FirstName)
                    .GroupBy(e => e.FirstName[0].ToString())
                    .Select(e => new ObservableGroupCollection<string, Employee>(e))
                    .ToList();

            BindingContext = new ObservableCollection<ObservableGroupCollection<string, Employee>>(groupedData);
        }
    }
}

After following the above implementation steps, you will get the following output screen on Android as well as iOS, as shown below.