.NET 4.0+

WPF Base Classes - ContentControl

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

The thirty-second part of the Windows Presentation Foundation Fundamentals tutorial looks at another base class for WPF controls, including several of the layout controls described in earlier instalments. This article describes the ContentControl class.

ContentControl

The ContentControl class is another base class that provides standardised functionality to Windows Presentation Foundation (WPF) controls. The class represents controls that can include a single item of content. This content is commonly plain text or a child control.

ContentControl is a subclass of Control, which we saw in the previous few articles in this tutorial. The new class adds several members over those defined in Control, of which we are interested in just one in this article. The property in question is Content. This is, unsurprisingly, used to set the content of a control.

Several of the layout controls that we've already seen in this tutorial inherit from ContentControl. ScrollViewer is a direct subclass and Expander, GroupBox and TabItem inherit indirectly. All of these controls allow you to add a single child control or other informational element as their content.

To demonstrate the use of the class we need a sample solution. Create a new WPF Application project in Visual Studio, naming the solution, "ContentControlDemo". Once initialised, replace the XAML in the main window with that shown below. This creates a window that holds an empty StackPanel. We'll be adding child items to the StackPanel to show how controls with content can be configured.

<Window x:Class="ContentControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ContentControl Demo"
        Width="220"
        Height="180">
    <StackPanel>
    </StackPanel>
</Window>

NB: The Window class also inherits from ContentControl, which is why it only permits you to add one child control directly. Of course, this is almost always a layout control with many children of its own.

Content Attribute

The only member that we'll look at in this article is Content. When accessed from code, you can assign any value to this property, as it holds a System.Object instance. This makes the property very flexible. It is quite common for some content controls to simply assign some text to the Content property. This is usually for controls such as Labels, which are provided to allow the display of text. However, there's nothing to stop you from applying the same technique to other content controls.

To demonstrate, let's use the one control that we've already seen in the tutorial that is derived directly from ContentControl. This is ScrollViewer, which renders its content in a scrollable area. Add the following ScrollViewer inside the StackPanel. Here the content is a simple string, which is set using an attribute in the XAML.

<ScrollViewer Background="LightCoral" Content="Simple Text in Attribute"/>

Run the program to see the results:

You can also set the content of a control to a string by putting the text between the opening and closing tags of the control, rather than in an attribute. This is shown with the following code sample, which you should add immediately following the existing ScrollViewer.

<ScrollViewer Background="LightYellow">Simple Text Between Element Tags</ScrollViewer>

When executed, the results should appear similar to the following image:

NB: You can use either the attribute or the content between the XAML tags to set the content of a ContentControl. Setting both for the same control is invalid.

Setting the Content to a Control

When you want to include more complex content than simple text, you can add a control between the opening and closing tags of the control's XAML element. You may use any standard or custom WPF control. The following ScrollViewer uses this technique to add a Button to the scrolling area.

<ScrollViewer Background="LightGreen">
    <Button Margin="30 5">Button as Content</Button>
</ScrollViewer>

The resultant window is shown below:

Adding Multiple Child Controls

Usually you are limited to a single item for the content of a control that subclasses ContentControl. However, this limitation is only a minor inconvenience, as the child control can be any of the layout controls that we've seen earlier in the tutorial. By adding a layout control with multiple children you can achieve complex and powerful results.

For the final sample, add the following ScrollViewer. This one has a StackPanel as its content. The StackPanel includes multiple child controls.

<ScrollViewer Background="LightCyan">
    <StackPanel>
        <Label Content="This is content too..."/>
        <Label>...as is this.</Label>
    </StackPanel>
</ScrollViewer>

The output of the final sample program is as follows: