Header and Footer

With R1 2019 release of Telerik UI for Xamarin RadListView exposes two new templates - Header and Footer, which will allow you to add content of your choice above and below the list with the items. Both header and footer templates are scrolled along with the ListView items.

  • HeaderTemplate(DataTemplate): Defines the Header of the ListView before all items.
  • FooterTemplate(DataTemplate): Defines the Footer of the ListView after all items.

Example

Here is an example how to add Header and Footer to the RadListView control.

First, create a ViewModel:

public class HeaderAndFooterViewModel
{
    public HeaderAndFooterViewModel()
    {
        this.Items = GetItems(20);
    }

    public ObservableCollection<string> Items { get; set; }

    private static ObservableCollection<string> GetItems(int count)
    {
        var items = new ObservableCollection<string>();
        for (int i = 0; i < count; i++)
        {
            items.Add(string.Format("item {0}", i));
        }

        return items;
    }
}

Add the following sample DataTemplates to the resources of the page that will be used as:

HeaderTemplate:

<DataTemplate x:Key="HeaderTemplate">
    <Label Text="The Available Items are: " 
           TextColor="Black" 
           FontAttributes="Bold" 
           FontSize="25"/>
</DataTemplate>

FooterTemplate:

<DataTemplate x:Key="FooterTemplate">
    <Label Text="All Items!" 
           TextColor="Black" 
           FontAttributes="Bold" 
           FontSize="25"/>
</DataTemplate>

Use the following snippet to declare the RadListView in XAML:

<telerikDataControls:RadListView x:Name="listView" 
                                 ItemsSource="{Binding Items}"
                                 HeaderTemplate="{StaticResource HeaderTemplate}" 
                                 FooterTemplate="{StaticResource FooterTemplate}"/>

Here is how the ListView Header looks:

RadListView Footer Template

and the ListView Footer:

RadListView Footer Template

A sample Header and Footer example can be found in our SDK Samples Browser application and QSF App.

See Also

In this article
Not finding the help you need? Improve this article