listview header and footer

AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

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

Posts

  • FokkeVermeulenOldFokkeVermeulenOld USMember ✭✭

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

  • LeeOlsen.5615LeeOlsen.5615 USUniversity

    @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?

  • LeeOlsen.5615LeeOlsen.5615 USUniversity

    @CraigDunn Thank you! That worked for me.

  • KurtHerrmannKurtHerrmann USMember

    This was really useful! Thanks.

  • williamkuwilliamku USMember

    thanks @CraigDunn !!!

  • JesseMJesseM USMember ✭✭

    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

  • CraigDunnCraigDunn USXamarin Team Xamurai

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

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

  • JesseMJesseM USMember ✭✭
    edited June 2015

    I just did the fresh install last week.

    Edit - thought you meant what version of xamarin.

    Forms is 4.0.30319

  • JesseMJesseM USMember ✭✭

    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>
    ......
    
  • JoshLoschenJoshLoschen USMember

    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.

  • hvaughanhvaughan USMember ✭✭✭

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


  • alexrainmanalexrainman USMember ✭✭

    @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?

  • CraigDunnCraigDunn USXamarin Team Xamurai

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

  • BhaurajBiradarBhaurajBiradar USUniversity ✭✭

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

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Listview has a Header property or HeaderTemplate

  • spirosatspirosat USMember

    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

  • rugairugai BRMember ✭✭

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

  • Dinesh_PhDinesh_Ph INMember

    Thank you so much @CraigDunn

  • RafeeqRafeeq USMember ✭✭
    edited April 17

    Hi Can we Bind The Footer in a Listview Dynamically?

Sign In or Register to comment.