HeaderedContentControl

Article
09/23/2021

The HeaderedContentControl is a UI control that allows content to be displayed with a specified header. The Header property can be any object and you can use the HeaderTemplate to specify a custom look to the header. Content for the HeaderedContentControl will align to the top left. This is to maintain the same functionality as the ContentControl.

Note

Setting the Background, BorderBrush and BorderThickness properties will not have any effect on the HeaderedContentControl. This is to maintain the same functionality as the ContentControl.

Try it in the sample app

Syntax

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:HeaderedContentControl>
    <!-- Header content or HeaderTemplate content -->
</controls:HeaderedContentControl>

Sample Output

HeaderedContentControl Sample

Properties

Property	Type	Gets or sets the data used for the header of each control
Header	object	Gets or sets the data used for the header of each control
HeaderTemplate	DataTemplate	Gets or sets the template used to display the content of the control's header
Orientation	Orientation	Gets or sets the Orientation to use for layout of the header. If set to Vertical the Header will be above the content. If set to Horizontal the Header will be to the left of the content.

Examples

The Header property can be set to a string, or any xaml elements. If binding the Header to an object that is not a string, use the HeaderTemplate to control how the content is rendered.

Sample Code

<controls:HeaderedContentControl Header="This is the header!"/>

<controls:HeaderedContentControl>
    <controls:HeaderedContentControl.Header>
        <Border Background="Gray">
            <TextBlock Text="This is the header!" FontSize="16" />
        </Border>
    </controls:HeaderedContentControl.Header>
</controls:HeaderedContentControl>

Used to control the look of the header. The default value for the HeaderTemplate will display the string representation of the Header. Set this property if you need to bind the Header to an object.

<controls:HeaderedContentControl Header="{Binding CustomObject}">
    <controls:HeaderedContentControl.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" />
        </DataTemplate>
    </controls:HeaderedContentControl.HeaderTemplate>
</controls:HeaderedContentControl>

Sample Project

HeaderedContentControl Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Default Template

HeaderedContentControl XAML File is the XAML template used in the toolkit for the default styling.

Requirements

Device family	Universal, 10.0.16299.0 or higher
Namespace	Microsoft.Toolkit.Uwp.UI.Controls
NuGet package	Microsoft.Toolkit.Uwp.UI.Controls

API

HeaderedContentControl source code

Share via