How To Use HeaderedContentControl In UWP

The HeaderedContentControl is a UI control that allows content to be displayed with a specified header. The Header property can be any object and we 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.

HeaderedContent is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use HeaderedContent Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

Windows 10 (Recommended)
Microsoft Visual Studio 2017
Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give it a suitable name (UWPHeaderedContent)->OK.

After choosing the target and minimum platform version that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

Step 2

Update the Reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version via Manage NuGet Packages.

Step 3

Add the following controls in the design window for HeaderedContentControl feature view. Add the StackPanel, TextBlock Control, and change the Name and Text property.

Add the HeaderedContentControl and Ellipse Control, inside the Stackpanel for Header content in shapes.

<controls:HeaderedContentControl x:Name="HCCShape" Header="Shape Header content- Circle" HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="120" >
<Ellipse x:Name="Shaellcir" Fill="LightPink" Height="100" Width="100" />
</controls:HeaderedContentControl>

Add images to Assets folder for HeaderedContentControl Imagedemo.

Add the HeaderedContentControl and Image Control for Header content in image.

<controls:HeaderedContentControl x:Name="HCCImage" Header="Image Header content- Nature" HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="134" Width="213" >
<Image x:Name="imgtest" Source="ms-appx:///Assets/img2.jpeg" Width="206"/>
</controls:HeaderedContentControl>

Add the HeaderedContentControl and TextBlock and Image Control inside the RelativePanel for Header content in Message.

<controls:HeaderedContentControl x:Name="HCCMsg" Header="RealtivePanel Header content- Messages" Margin="133,0,30,0">
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="Icon" Height="50" Width="50" Source="ms-appx:///Assets/message.png" />
<TextBlock x:Name="Msg" RelativePanel.RightOf="Icon" Text=" 5" />
<TextBlock FontSize="12" Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" RelativePanel.AlignLeftWith="Msg" RelativePanel.Below="Msg" Text="Unread" /> </RelativePanel>
</controls:HeaderedContentControl>

Note

Automatically, the following code will be generated in XAML code view, when we are done in the design view.

<Page x:Class="UWPHeaderedContent.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPHeaderedContent" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="400,65,0,0" TextWrapping="Wrap" Text="HeaderedContent XAML Control Demo" VerticalAlignment="Top" FontWeight="Bold" FontSize="36" Height="48" />
<StackPanel Margin="387,140,433,4">
<controls:HeaderedContentControl x:Name="HCCShape" Header="Shape Header content- Circle" HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="120">
<Ellipse x:Name="Shaellcir" Fill="LightPink" Height="100" Width="100" /> </controls:HeaderedContentControl>
<controls:HeaderedContentControl x:Name="HCCImage" Header="Image Header content- Nature" HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="134" Width="213">
<Image x:Name="imgtest" Source="ms-appx:///Assets/img2.jpeg" Width="206" /> </controls:HeaderedContentControl>
<controls:HeaderedContentControl x:Name="HCCMsg" Header="RealtivePanel Header content- Messages" Margin="133,0,30,0">
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="Icon" Height="50" Width="50" Source="ms-appx:///Assets/message.png" />
<TextBlock x:Name="Msg" RelativePanel.RightOf="Icon" Text=" 5" />
<TextBlock FontSize="12" Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" RelativePanel.AlignLeftWith="Msg" RelativePanel.Below="Msg" Text="Unread" /> </RelativePanel>
</controls:HeaderedContentControl>
</StackPanel>
</Grid>
</Page>

Step 4

Deploy your App on a local machine. The output of the UWPHeaderedContent is,

Summary

Now, you have successfully tested HeaderedContent control in XAML and UWP environment using Visual Studio 2017.