listview header and footer

AlessandroCaliaro · March 2015

Hi
Where can I find an example how to use header and footer in new listview? Not mvvm...
Thanks

FokkeVermeulenOld · March 2015

I would love to see a sample about using the footer in a listview correctly too

CraigDunn · March 2015

There's some mention in the listview doc.

This also works

<ListView x:Name="listView">
   <ListView.Header>
    <StackLayout Padding="10,5,0,5" BackgroundColor="#cccccc">
        <Label Text="Header" />
        <Label Text="Subhead" FontSize="Small"/>
    </StackLayout>
  </ListView.Header>
  <ListView.Footer> 
    <Label Text="Footer" />
  </ListView.Footer>
  <ListView.ItemTemplate>
    <DataTemplate>
      <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Note that header/footer is separate from GroupDisplay which is covered in the LabelledSectionsList sample.

LeeOlsen.5615 · March 2015

@CraigDunn If I try using a ListView.Header like your example, it pads the top of the ListView but the space is blank. If I try with a ListView.HeaderTemplate (wrapping the StackLayout in a DataTemplate), there is no header at all. If I just put Header="{Binding VALUE}" in the ListView declaration, I can get the text to show up. Has anyone gotten this working with a template/label?

CraigDunn · March 2015

It is looking for the Header property on the ListView to be the binding source for the HeaderTemplate.

If you set the Header property to a string, you can surface that in the template like this:

<ListView x:Name="listView" Header="TEST HEADER"> <!-- this object will be the bindingcontext -->
    <ListView.HeaderTemplate >
      <DataTemplate>
        <StackLayout Orientation="Horizontal">
          <Label Text="--"/>
          <Label Text="{Binding .}"/> <!-- use the object in Header as the binding source -->
          <Label Text="--"/>
        </StackLayout>
      </DataTemplate>
    </ListView.HeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Without setting the Header property, the binding source is null. Alternatively you could set the page's BindingContext to a string and reference that, either in code

BindingContext = "TEST HEADER C#";
listView.SetBinding (ListView.HeaderProperty, new Binding("."));

or this XAML

<ListView x:Name="listView" Header="{Binding .}">

OR now you know how it works, you can manipulate the binding context of the page, the listview and the Header property to control what binding context is set for the HeaderTemplate.

Final note: as you've already noticed, if you set the Header but not a header template, the Header object itself is rendered as the "header". This can be a simple string, or a non-bindable view

LeeOlsen.5615 · March 2015

@CraigDunn Thank you! That worked for me.

CraigDunn · March 2015

@LeeOlsen cool. Note that there still might be a bug with using StackLayout in the FooterTemplate, so steer clear of complex footers for now.

Here's a more complex example

<!-- Using binding to the page's datacontext -->
<ListView x:Name="listView" 
    ItemsSource="{Binding Monkeys}" 
    Header="{Binding Intro}"
    Footer="{Binding Summary}">
    <ListView.HeaderTemplate >
      <DataTemplate>
        <StackLayout Orientation="Horizontal" 
            Padding="10,5,5,10"
            BackgroundColor="Yellow">
          <Label Text="~~"/>
          <Label Text="{Binding .}"/>
          <Label Text="~~"/>
        </StackLayout>
      </DataTemplate>
    </ListView.HeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

and the codebehind:

    class Monkey {
        public string Name {get;set;}
        public string Description {get;set;}
    }
    class MonkeyVM {
        public List<Monkey> Monkeys { get; set; }
        public string Intro { get { return "Monkey Header"; }}
        public string Summary { get { return " There were " + Monkeys.Count + " monkeys"; }}
    }
    public partial class HeaderFooterXaml : ContentPage
    {
        public HeaderFooterXaml ()
        {
            InitializeComponent ();

            var monkeys = new List<Monkey> {
                new Monkey {Name="Xander", Description="Writer"},
                new Monkey {Name="Rupert", Description="Engineer"},
                new Monkey {Name="Tammy", Description="Designer"},
                new Monkey {Name="Blue", Description="Speaker"},
            };
            BindingContext = new MonkeyVM {Monkeys = monkeys};
        }
    }

KurtHerrmann · April 2015

This was really useful! Thanks.

williamku · May 2015

thanks @CraigDunn !!!

JesseM · June 2015

When I use ListView.Header, I get an exception:

Xamarin.Forms.Xaml.XamlParseException: Position 13:8. No Property of name Header found

I am doing it exactly as you suggest in Post#3 of this thread @CraigDunn

CraigDunn · June 2015

@JesseM what version of Xamarin.Forms are you using?

Have you tried the ListView sample (see the xaml )?

JesseM · June 2015

I just did the fresh install last week.

Edit - thought you meant what version of xamarin.

Forms is 4.0.30319

JesseM · June 2015

Here is the code:

<ListView     xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:local="clr-namespace:XamFormsMDTest;assembly=XamFormsMDTest"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="XamFormsMDTest.AreaListView"
              IsVisible="true"
              ItemsSource="{x:Static local:App.Areas}"
              VerticalOptions="Center"
              BackgroundColor="Green"
                  >
    <ListView.Header>
      <StackLayout Orientation="Horizontal"
          Padding="10,5,5,10"
          BackgroundColor="Yellow">
        <Label  Text="Area"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="Center"
                BackgroundColor="Red"
                TextColor="Black" />
      </StackLayout>
    </ListView.Header>
    <ListView.ItemTemplate>
      <DataTemplate>
......

JoshLoschen · July 2015

I'm also having issues with the ListView.Header and ListView.Footer. Same error as JesseM, "XamlParseException .... No Property of name Header". Similar error for footer.

hvaughan · September 2015

@JesseM @JoshLoschen
It looks like you are putting the ListView where your ContentPage should go. Your ListView needs to be within a ContentPage. Then, you should put all of your header content into a DataTemplate attribute and then put that DataTemplate attribute into the ListView.HeaderTemplate property. Then you will set your BindingContext within the ListView.Header property.

See below for one of my stripped down pages, which is a ContentPage with a single ListView in it. Then in the code-behind, I am simply setting the ContentPage's BindingContext to my ViewModel.

You would put your ListView.Header content in place of the single <Label Text="{Binding Name}"/> part below. The bindings and other parts would only work for me (using the ListView.HeaderTemplate) if I set the correct {Binding} within ListView.Header, so be sure to do that. It will become the ListView.HeaderTemplate's BindingContext. Below I am just setting the 'ListView.Header' binding to the ContentPage's BindingContext.

Also note that I am using the ListView groups, which you do not have to use if you don't want to.

<?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:map="clr-namespace:MAP;assembly=MAP"
             x:Class="MAP.Pages.ExpensePages.ExpensePage"
             Title="Expenses"
             Style="{StaticResource ExpenseContentPageStyle}">

<ListView x:Name="ReceiptGroupListView"
          Header="{Binding}"
          GroupDisplayBinding="{Binding LongName}"
          IsGroupingEnabled="True"
          SeparatorColor="{x:Static map:Constants.ExpenseDisabledHex}"
          ItemSelected="OnItemSelected"
          BackgroundColor="Transparent"
          VerticalOptions="FillAndExpand">
<ListView.HeaderTemplate>
  <DataTemplate>
    <Grid>
      <Label Text="{Binding Name}"/>    //Your Header content goes here
    </Grid>
  </DataTemplate>
</ListView.HeaderTemplate>
<ListView.GroupHeaderTemplate>
  <DataTemplate>
    <ViewCell Height="25">
      <StackLayout VerticalOptions="CenterAndExpand"
                   Padding="5"
                   BackgroundColor="{x:Static map:Constants.Blue}">
        <Label Text="{Binding LongName}"
               FontSize="Small"
               FontAttributes="Bold"
               TextColor="White"
               VerticalOptions="End"
               YAlign="Center"
               Style="{StaticResource BaseLabelStyle}"/>
      </StackLayout>
    </ViewCell>
  </DataTemplate>
</ListView.GroupHeaderTemplate>

<ListView.ItemTemplate>
  <DataTemplate>
    <ImageCell ClassId="{Binding ImageName}"
               ImageSource="{Binding ImageSource}">
      <ImageCell.ContextActions>
        <MenuItem Text="Delete"
                  IsDestructive="True"
                  Clicked="OnDeleteImageTapped"/>
      </ImageCell.ContextActions>
    </ImageCell>
  </DataTemplate>
</ListView.ItemTemplate>

alexrainman · December 2015

@CraigDunn is there a way to add GroupFooterTemplate? I mean, let's call it this way as, in iOS you have a GetHeightForFooter and GetViewForFooter but that's not available in Xamarin Forms custom renderer. Any ideas how to implement it in both platforms with custom renderers? Do you have it in the roadmap?

CraigDunn · December 2015

Anything from the native platform would be available in a custom renderer, so if you want really fine-grained control over some UI element (whether it's UITableView or something else) then a custom renderer is often the way to go.

There's no GroupFooterTemplate currently available (that I can see).

BhaurajBiradar · April 2016

Hi, I am having ListView inside Content View page, How can i add the Header to listview?

AlessandroCaliaro · April 2016

Listview has a Header property or HeaderTemplate

spirosat · October 2016

Hey everyone,

Is there a reason why both header and footer dont cover the whole width of the listview? In the example below you'll see that on the right side of header and footer Aqua background of ListView is visible

<ListView BackgroundColor="Aqua" HasUnevenRows="True">
  <ListView.Header>
    <Label Text="header" BackgroundColor="Fuchsia"/>
  </ListView.Header>
  <ListView.Footer>
    <Label Text="footer" BackgroundColor="Blue"/>
  </ListView.Footer>
  <ListView.ItemTemplate>
    <DataTemplate>
      <Label Text="body" BackgroundColor="Red"/>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Thanks

rugai · December 2016

@spirosat said:
Hey everyone,

Is there a reason why both header and footer dont cover the whole width of the listview? In the example below you'll see that on the right side of header and footer Aqua background of ListView is visible
<ListView BackgroundColor="Aqua" HasUnevenRows="True">
  <ListView.Header>
    <Label Text="header" BackgroundColor="Fuchsia"/>
  </ListView.Header>
  <ListView.Footer>
    <Label Text="footer" BackgroundColor="Blue"/>
  </ListView.Footer>
  <ListView.ItemTemplate>
    <DataTemplate>
      <Label Text="body" BackgroundColor="Red"/>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
Thanks

Try adding a StackLayout to hold your elements. This should do the trick.

Dinesh_Ph · November 2017

Thank you so much @CraigDunn

Rafeeq · April 2018

Hi Can we Bind The Footer in a Listview Dynamically?

Ajay87 · June 17

@hvaughan Thanks its working as expected.

Xamarin

Quick Links

listview header and footer

Posts