UWP - How to use ListView HeaderTemplate

UWP - ListView HeaderTemplate

The ListView class represents a control that displays data items in a vertical stack in a UWP app. The UWP developers are using a ListView to display a collection of items stacked vertically or horizontally.

The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default.

The ListViewBase class’s HeaderTemplate property gets or sets the DataTemplate used to display the content of the view header. This property value is a DataTemplate instance which is the template that specifies the visualization of the header object. The default value of this property is null. So using this HeaderTemplate property we can display a customized header for the ListView control.

The DataTemplate class describes the visual structure of a data object. This class is used for data binding for specific elements in the template that display the data values.

The UWP app developers commonly use a DataTemplate to specify the visual representation of ListView data. The DataTemplate objects are especially useful when they are binding an ItemsControl such as a ListView to an entire collection. In the following UWP app development tutorial code, we used the HeaderTemplate to display a header for the ListView control.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="stack_panel1" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="25"
        >
        <ListView
            x:Name="ListView1"
            Background="Snow"
            >
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <StackPanel
                        Background="Crimson"
                        BorderBrush="DarkRed"
                        BorderThickness="0,0,0,2"
                        >
                        <TextBlock
                            Foreground="Snow"
                            FontStyle="Italic"
                            FontWeight="Bold"
                            FontSize="25"
                            Text="Select a color from this list."
                            Padding="7"
                            FontFamily="Calibri"
                        />
                    </StackPanel>
                </DataTemplate>
            </ListView.HeaderTemplate>
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI;
using Windows.UI.Xaml;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the list item height
                item.Height = 50;

                if (index % 2 == 0)
                {
                    // Set the regular item background
                    item.Background = new SolidColorBrush(Colors.SeaGreen);
                }
                else
                {
                    // Set the alternate item background
                    item.Background = new SolidColorBrush(Colors.MediumSeaGreen);

                    // Set the alternate item content alignment
                    item.HorizontalContentAlignment = HorizontalAlignment.Right;
                }

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}