.NET 4.0+

WPF Base Classes - HeaderedContentControl

by Richard Carr, published at http://www.blackwasp.co.uk/HeaderedContentControl.aspx

The thirty-third part of the Windows Presentation Foundation Fundamentals tutorial looks at another base class for WPF controls, including three layout controls considered earlier in the series. This article describes the HeaderedContentControl class.

HeaderedContentControl

HeaderedContentControl is another base class for Windows Presentation foundation (WPF) controls. It is derived from ContentControl, which represents controls that can include a single item of content. HeaderedContentControl adds extra functionality for content controls that include a header. We've seen three such controls earlier in the tutorial. They are the Expander, GroupBox and TabItem controls.

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.

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, which inherit from HeaderedContentControl, to demonstrate the configuration of headers in the remainder of the article.

<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>
    </TabControl>
</Window>

Setting the Header Using an Attribute

If you wish to use plain text for your header 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:

<TabItem Header="Tab One"/>

Run the program to see the results. You should see that the header appears as shown below.

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 is 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.

To demonstrate, add a second TabItem to the TabControl, using the following XAML:

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

The results are as follows:

Adding Controls to the Header

As with the Content property, 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.

For the final sample, consider the XAML below. This third TabItem, which should be added within the TabControl element, uses a horizontal StackPanel for the header. The StackPanel contains an ellipse and a Label.

<TabItem>
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Ellipse Width="10" Height="10" Fill="Red" />
            <Label>Tab Three</Label>
        </StackPanel>
    </TabItem.Header>
</TabItem>

The results are shown in the rightmost tab below. You might use this type of layout to indicate that the contents of a tab have changed and need to be saved. After saving you would hide the ellipse.