HubSection.HeaderTemplate property

Applies to Windows and Windows Phone

Gets or sets the DataTemplate used to display the content of the hub section header.


public DataTemplate HeaderTemplate { get; set; }


<HubSection HeaderTemplate="resourceReferenceToDataTemplate"/>

XAML Values


A single DataTemplate object element. That DataTemplate would typically have multiple child elements that define the visual appearance of the data representation.


A resource reference to an existing DataTemplate from a resources collection. The resource reference must specify the desired DataTemplate by key through a StaticResource usage.

Property value

Type: DataTemplate

The template that specifies the visualization of the header object. The default is null.


Add a header to let users know the context of your Hub section. You can use a data template for the header by setting the HeaderTemplate property. It's important to remember that although you can use arbitrary content in the header, the height of the header affects the amount of vertical space available for your hub section content. The section header scrolls with the hub section.

You can make a section header interactive by setting the IsHeaderInteractive property to true. Typically, the user can tap an interactive header to navigate to the corresponding app section page.

You can respond to a tapped header by handling the Hub.SectionHeaderClick event, and you get the section that was clicked from the SectionHeaderClickEventArgs.Section property of the event data.

When its IsHeaderInteractive property is true, the default header includes a chevron glyph, and "Hover" and "Pressed" visual states. If you use a custom HeaderTemplate, you should provide similar visual cues to indicate that the header is interactive.


Minimum supported client

Windows 8.1

Minimum supported server

Windows Server 2012 R2

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]


Windows::UI::Xaml::Controls [C++]



See also




© 2014 Microsoft