Content Control in WPF

Introduction

This article explains the Content Control class in Windows Presentation Foundation (WPF). Content Control is a base class that provides standardised functionality to WPF Controls. The Content Control class represents controls that can include a single item of content. This content is commonly plain text or a child control. Content Control is a subclass of the Control class in WPF.

Background

This new class adds several members than those defined in Control. The property in question is Content is used to set the content of a control. Several layout controls inherits from Content Control. We have used the Scroll Viewer that is direct subclass.

Solution

When a Content Control is accessed from code, you can assign any value to this property, since it holds a System.Object instance. This makes the property very flexible. We will assign text to the content property. Labels are provided to allow display of text. In our solution we will proceed as follows:

1. Assign an attribute to the content property
2. Set the content to a Control.
3. Add multiple child controls.

Procedure

Step 1

Content Attribute

First we will use the Scrollviewer that render it's content in a scrollable area. We will add the scrollviewer inside the stack panel. Here the content is simple a string that is set using an attribute in XAML

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

 

Step 2

Content Attribute

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.

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

 

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.

Step 3

Setting the content to a control

Scrollviewer uses this technique to add a button to the scrollable area.

<ScrollViewer Background="LightPink">

            <Button Margin="30 5">Button as Content</Button>

        </ScrollViewer>

 

 Step 4

Adding multiple Controls

Add the scrollviewer that has a stackpanel as it's content. The stackpanel includes multiple child controls.

<ScrollViewer Background="LightCyan">

            <StackPanel>

                <Label Content="This is content too..."/>

                <Label>...as is this.</Label>

            </StackPanel>

        </ScrollViewer>

 

 

 Step 5

The entire xaml will look like this.

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

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

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

        <ScrollViewer Background="LightPink">

            <Button Margin="30 5">Button as Content</Button>

        </ScrollViewer>

        <ScrollViewer Background="LightCyan">

            <StackPanel>

                <Label Content="This is content too..."/>

                <Label>...as is this.</Label>

            </StackPanel>

        </ScrollViewer>

    </StackPanel>

</Window>

Step 6

We will also add the interaction logic for the mainwindow.xaml as follows.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

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 ContentControlDemo

{

   

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

    }

}

Final Output