WPF Wonders: Building Control Templates

WPF Wonders: Building Control Templates

PF’s XAML language defines the controls that make up a user interface. Typically, some kind of container control such as a Grid or StackPanel fills the window. In turn, that container holds other controls, such as Labels, TextBoxes, Buttons, Sliders, and so forth.

Your XAML code defines the user interface’s structure and?to an extent?its behavior. For example, you can define animations in XAML that change control properties such as size and position when certain events occur.

WPF also lets you use templates to define the structure of the controls that make up the interface. By controlling the structure of a Slider, for example, you can change the way it looks and acts. For example, you could use a template to make a Slider display round buttons on its ends, a thin track in the middle, and a fat diamond-shaped thumb for dragging.

This article describes templates, explains how to build and use them, and provides a few useful examples.

What Is a Template?

Figure 1. Slider Dissected: If you look closely at a WPF Slider control, you’ll see that it’s a composite, made up of lots of parts that are actually other controls.

If you look closely at most controls, you’ll find that they’re made up of a number of parts. Figure 1 shows a Slider control with its constituent parts marked.

You might imagine that a single chunk of code makes up the Slider and creates all of these pieces, but that’s not the case. The Slider is made up of an assortment of other controls, including Border, Canvas, Grid, Path, Rectangle, RepeatButton, Thumb, TickBar, and Track controls. For example, the TickBar control draws the tick marks and the Thumb allows the user to click and drag the thumb. Together, those individual controls determine the Slider control’s appearance and behavior.

The control’s template determines the Slider’s pieces and how they behave. It defines the sub-controls that make up the Slider and determines how they interact with the user through the sub-controls’ properties.

This would all be only mildly interesting if it weren’t for the fact that you can change a control’s template. If you want to build an elliptical Slider that lets the user drag a circle around the ellipse’s rim, you can! You’ll have to define how the new template provides a Slider’s typical behavior?but you can do it if you really want to.

Presenting the ContentPresenter

A template contains an arrangement of controls that make up some other control. Defining the controls themselves isn’t difficult, but there are a couple pieces of information that you cannot hardwire directly into the template’s code.

First, the template cannot directly include whatever it is that the control is supposed to display. For example, suppose you’re building a Label template. You can use a TextBlock or some other control (even a regular Label) to define the control, but you cannot hard-code the value the Label will display. (If you were to set the TextBlock’s Text property to “Hello,” the control wouldn’t be able to display anything other than “Hello.”)

WPF provides a ContentPresenter object to tell the template what the control is supposed to display. You place this object inside the template where you want the content displayed and WPF does its best to do the rest.

With that little bit about templates and the ContentPresenter, you can build a simple template. The following code shows a basic template that adds an outline to a Label control. You should define the template in some object’s Resources section. This example creates the template in the Window’s Resources section so you can use it on any Label in that Window.


Figure 2. Outstanding Outline: The OutlinedLabel example program uses a template to draw an outline around its content.

The x:Key attribute gives the template a name so the code can refer to it later. The TargetType attribute controls which type(s) of controls can use the template.

The template contains a Border control that displays a thick red border. That control holds the ContentPresenter. Typically, the label control’s content is simple text, so the ContentPresenter displays the text. However, if you set the Label’s content to something unusual, such as a Button, the ContentPresenter happily drops that into the Border instead.

The following code shows how the OutlinedLabel example program (available in the downloadable sample code in both VB.NET and C#), shown in Figure 2, uses this template. The Template attribute tells the control to use the temOutlinedLabel template.


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist