Headered Content Control in WPF

Introduction

HeaderedContentControl is another base class for Windows Presentation foundation (WPF) controls. It is derived from ContentControl that represents controls that can include a single item of content. HeaderedContentControl adds extra functionality for content controls that include a header. Similar type of controls  are the Expander, GroupBox and TabItem controls.

Background

As with the content of such controls, the header can be set to plain text or to a single child control. Although only one piece of header content is permitted, this can be a layout control with multiple children, allowing complex user interfaces to be constructed.

Solution

To demonstrate the use of controls derived from HeaderedContentControl we need a sample project. Create a new WPF application project in Visual Studio, naming the new solution, "HeaderedContentControlDemo". Once the project is prepared, replace the content of the main window with the XAML shown below. This creates a window that holds a TabControl with no tabs. We'll add TabItems that inherit from HeaderedContentControl, to demonstrate the configuration of headers in the remainder of the article.

Procedure

Step 1

Setting a header using an attribute

If you wish to use plain text for your header then you can set it using the Header attribute in XAML or the Header property from code. We'll only look at the XAML configuration in this article. Try adding the following TabItem definition within the TabControl.

Step 2

Setting the header using property element syntax

Another way to configure the header of a control in XAML is to use property element syntax. This requires that the property to be defined in a child element of the control. Although generally unnecessary and possibly with lower readability than when using the attribute, you can use this approach to set the header to plain text.

Step 3

Adding controls to the header

As with the Content property, the Header is defined as a System.Object, so you can actually use any type for its value. Most often the header is set either to plain text, as seen above, or to another control. When you wish to use a child control, you can use property element syntax in your XAML.

The following is the code behined source:

<Window x:Class="HeaderedContentControlDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="HeaderedContentControl Demo"

        Width="250"

        Height="200">

    <TabControl>

        <TabItem Header="Tab One"/>

        <TabItem>

            <TabItem.Header>Tab Two</TabItem.Header>

        </TabItem>

        <TabItem>

            <TabItem.Header>

                <StackPanel Orientation="Horizontal">

                    <Ellipse Width="10" Height="10" Fill="Red" />

                    <Label>Tab Three</Label>

                </StackPanel>

            </TabItem.Header>

        </TabItem>

    </TabControl>

</Window>

 

And here is the interaction logic for mainwindow.xaml:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace HeaderedContentControlDemo

{

   

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

    }

}

 

Output

 

1. On running your application, you will get the following output window:

 

 

 

 2. On clicking on Tab Two, the Tab Two header is highlighted.

 

 

 

3. Similarly, when you click Tab Three, it is automatically highlighted.