Xamarin.Forms - Using ListView HeaderTemplate And FooterTemplate To Display Data

The ListView Headers and Footers are Text or View to display at the beginning and end of a list, separate from the list's data. Headers and footers can be bound to a data source independently from the ListView's data source.

In this article, we will learn how to use ListView HeaderTemplate and FooterTemplate to display data from our ViewModel like total of items and sum of values in a Xamarin.Forms Application using Visual Studio Community 2017.

Creating a Xamarin.Forms Project

Open Visual Studio 2017 Community. Go to File-> New Project.
Select Cross-Platfom -> Xamarin Platform App (Xamarin.Forms or Native) -> click OK.
Set the name of Project XF_Products;

Now, set the settings as given below.

Blank app
Forms
Portable Class Library (PCL)

Now, click OK.

Xamarin

Click OK after selecting the Target version and Minimum version of your Universal Windows Project.

Xamarin

Now, your project is created and you are ready for development.

A project containing the App.xaml and MainPage.xaml pages has been created in the Portable project. In the code-behind of the App.xaml file, we have the App.cs class which will contain the shared code and which we will use in this article.

In the App.cs file, include the following code where we set the main page of the application as the MainPage.

using Xamarin.Forms;
namespace XF_Products
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new XF_Products.MainPage());
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Defining the Model and Service

Create a Model folder in the project. Inside Model folder, create the Product Class with the following code.

namespace XF_Products.Model
{
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
}
}

Also, create the ProductService class inside Model folder with code below.

using System.Collections.ObjectModel;
namespace XF_Products.Model
{
public class ProductService
{
public ObservableCollection<Product> GetAll { get; private set; }
public ProductService()
{
GetAll = new ObservableCollection<Product> {
new Product { Name = "HP Stream LapTop", Price = 199.00M },
new Product { Name = "Western Digital 1 TB", Price = 64.99M},
new Product { Name = "Casio Calculator", Price = 7.79M },
new Product { Name = "Microsoft Surface Pro", Price = 854.19M },
new Product { Name = "Dell 27 LCD Monitor", Price = 168.36M },
new Product { Name = "HP 27 LED Monitor", Price = 178.50M },
new Product { Name = "Memorex Lens Cleaner", Price = 9.98M },
};
}
}
}

This code is used to populate a list of products.

Defining the ViewModel

Now, create the folder ViewModel in the Project and then create the ProductsViewModel class with the following code.

using System.Collections.Generic;
using System.Linq;
using XF_Products.Model;
namespace XF_Products.ViewModel
{
public class ProductsViewModel
{
public IList<Product> Items { get; private set; }
public int ItemsCount { get; private set; }
public decimal ItemsSummary { get; private set; }
public ProductsViewModel()
{
var service = new ProductService();
Items = service.GetAll.OrderBy(c => c.Name).ToList();
ItemsCount = service.GetAll.Count;
ItemsSummary = service.GetAll.Sum(p => p.Price);
}
}
}

This code defines the proprerties Items, ItemsCount, and ItemsSummary that we will use in our View. The class constructor is used to get the list of product ordered by name, the items total of the list and the sum of product’s price list.

Defining the View: MainPage

Let's now set the code of the MainPage.xaml view as below

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XF_Products"
x:Class="XF_Products.MainPage"
Title="Products Price">
<ListView
x:Name="ContatosListView" HasUnevenRows="True"
ItemsSource="{Binding Items}" Header="{Binding}" Footer="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Name}" HorizontalOptions="Start" />
<Label Text="{Binding Price, StringFormat='{0:C2}'}" HorizontalOptions="EndAndExpand" TextColor="Blue" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<ContentView BackgroundColor="Beige">
<Label Margin="10" HorizontalOptions="CenterAndExpand" Text="{Binding ItemsCount, StringFormat='Items Total : {0}'}" TextColor="Black"/>
</ContentView>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<ContentView BackgroundColor="Aquamarine">
<Label Margin="10" Text="{Binding ItemsSummary, StringFormat='Total: {0:C2}'}" TextColor="Blue" HorizontalTextAlignment="End"/>
</ContentView>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
</ContentPage>

This code defines the ListView ItemsSource property by using the databinding for the products list of Items.

We also define the Header and Footer using the {Binding} notation without defining a Source or Path. Doing so XAML understands that the object that will be used for the Binding will be the same as the current BindingContext. Because ListView propagates this object to the Header and Footer templates, this is not necessary.

Next we set the HeaderTemplate and FooterTemplate configured to display the ItemsCount and ItemsSummary properties.

Finally open the MainPage.xaml.cs file and include the code below

using Xamarin.Forms;
using XF_Products.ViewModel;
namespace XF_Products
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new ProductsViewModel();
}
}
}

This code is creating an instance of our ViewModel and assigning it to the BindingContext. Running the project, we will get the following result: (Our default project is the Android project).

Xamarin

Summary

Finally, we have learned how use ListView Footer and Header to display data from our ViewModel at the beginning and the end of the ListView.