HeaderedContentControl

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.

Syntax

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

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

Sample Output

Properties

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

API

• HeaderedContentControl source code