Decorator Class in WPF

Introduction

This article explains the decorator class that is a simple base class of WPF layout controls. Decorators have a single child control to which they apply a single child control.

Background

Here we have used a child control derived from the decorator class, in other words the Border class. The Border adds a rectangular border, with optional rounded corners, around its child control.

Solution

To demonstrate the use of decorators, create a new WPF application project in Visual Studio, naming the project, "DecoratorDemo". Once loaded, replace the XAML of the main window with that shown below. This creates a Border containing a Button control. It shows how the child control of a Decorator is set; it is described between the opening and closing tags of its parent's XAML element.

Procedure

Here we will use the child property.

Step 1

You can set the child control using C# code. To do so you set the Child property. Unlike other base classes that we've seen, the Child property can only be set to an object of a type that inherits from UIElement. This does include all WPF controls but none of the other types that you might use with a ContentControl or HeaderedContentControl.

Step 2

Add a Click event to the Button. Replace the Button's XAML with the following:

<Button Click="Button_Click">Hello, world!</Button>

</Border>

When the program is executed the window that appears similar to the image below:

Step 3

In the code behind the window add the method that will be called when the button is clicked. The method below replaces the Button with a new Label.

private void Button_Click(object sender, RoutedEventArgs e)

{

MyBorder.Child = new Label

{

Content = "Goodbye, cruel world!",

HorizontalAlignment = HorizontalAlignment.Center,

VerticalAlignment = VerticalAlignment.Center,

};

}

On running the program and clicking the button, you will see the following output.

Output

2. On clicking on the "Hello, world!" button above, the following window appears.