Posts

• FokkeVermeulenOld USMember ✭✭

  March 2015

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

  1
• CraigDunn USXamarin Team Xamurai

  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.

  14
• LeeOlsen.5615 USUniversity ✭✭

  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?

  0
• CraigDunn USXamarin Team Xamurai

  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

  test-header.png 22K

  9
• LeeOlsen.5615 USUniversity ✭✭

  March 2015

  @CraigDunn Thank you! That worked for me.

  0
• CraigDunn USXamarin Team Xamurai

  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};
          }
      }
  

  

  monkey-binding.png 42.8K

  5
• KurtHerrmann USMember ✭

  April 2015

  This was really useful! Thanks.

  0
• williamku USMember ✭

  May 2015

  thanks @CraigDunn !!!

  0
• JesseM USMember ✭✭

  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

  0
• CraigDunn USXamarin Team Xamurai

  June 2015

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

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

  0
• JesseM USMember ✭✭

  June 2015 edited June 2015

  I just did the fresh install last week.

  Edit - thought you meant what version of xamarin.

  Forms is 4.0.30319

  0
• JesseM USMember ✭✭

  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>
  ......
  

  0
• JoshLoschen USMember ✭

  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.

  0
• hvaughan USMember ✭✭✭

  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>
  

  
  

  2
• alexrainman USMember ✭✭

  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?

  0
• CraigDunn USXamarin Team Xamurai

  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).

  0
• BhaurajBiradar USUniversity ✭✭

  April 2016

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

  0
• AlessandroCaliaro ITMember ✭✭✭✭✭

  April 2016

  Listview has a Header property or HeaderTemplate

  0
• spirosat USMember ✭

  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

  0
• rugai BRMember ✭✭

  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.

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

  0
• Dinesh_Ph INMember ✭

  November 2017

  Thank you so much @CraigDunn

  0
• Rafeeq USMember ✭✭

  April 2018 edited April 2018

  Hi Can we Bind The Footer in a Listview Dynamically?

  0
• Ajay87 INMember ✭✭✭

  June 2020

  @hvaughan Thanks its working as expected.

  0