Xamarin.Forms - ListView Header And Footer Template

Introduction

In this article, you will learn about Header Template List View in Xamarin.Forms applications. Most list views do not have header templates. But if we are using lists often then we can use this header template to display the content. So in this article we will learn about header and footer templates and list view Items.

Pre-requisites

Windows 10 (Recommended)
Visual Studio 2017 Community Edition (It is a free software available online).

Let’s start!

Step 1

Open Visual Studio->New Project->Templates->Visual C#->Cross Platform->Cross Platform App(Xamarin). Now, give the project name and project location.

Step 2

Next, open a new window. Here, select Template->Blank App, UI Technology->Xamarin.Forms and finally Code Sharing Strategy ->Portable Class Library (PCL).

Step 3

Open Solution Explorer->Project Name (PCL)-> MainPage.xaml then click to open XAML Code .

Here, put in the list view code.

XAML Code

<ListView x:Name=”MainListView” Header=”” HasUnevenRows=”True”>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Label Text=”The Header Template” FontSize=”30″ BackgroundColor=”Violet” TextColor=”White”></Label> </Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<Grid>
<Label Text=”The Footer Template” FontSize=”30″ BackgroundColor=”Blue” TextColor=”White”></Label> </Grid>
</DataTemplate>
</ListView.FooterTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding=”12″>
<Label Text=”{Binding .}” FontSize=”Medium”></Label> </Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Step 4

Open Solution Explorer->Project Name (PCL)-> MainPage.xaml cs then click to open cs code then create list view values.

C# Code

MainListView.ItemsSource = new List < string > {
"Anbu",
"Guna",
"Hari",
"Mani",
"Karthi",
"Sathis",
"Poovarasan",
"Mukesh",
"Karthik"
};

Step 5

Next create Click Event in ListView below the MainPage(),

C# Code

public MainPage() {
InitializeComponent();
MainListView.ItemsSource = new List < string > {
"Anbu",
"Guna",
"Hari",
"Mani",
"Karthi",
"Sathis",
"Poovarasan",
"Mukesh",
"Karthik"
};
MainListView.ItemSelected += MainListView_ItemSelected;
}
private void MainListView_ItemSelected(object sender, SelectedItemChangedEventArgs e) {
DisplayAlert("This is " + e.SelectedItem.ToString(), "", "Ok");
}

Step 6

Finally set up Default Running Platform [Android /iOS/UWP].

iOS

Android

UWP

Finally , we have successfully created Xamarin.forms ListView Header & Footer template