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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin


The Latest

Top 5 B2B SaaS Marketing Agencies for 2023

In recent years, the software-as-a-service (SaaS) sector has experienced exponential growth as more and more companies choose cloud-based solutions. Any SaaS company hoping to stay ahead of the curve in this quickly changing industry needs to invest in effective marketing. So selecting the best marketing agency can mean the difference

technology leadership

Why the World Needs More Technology Leadership

As a fact, technology has touched every single aspect of our lives. And there are some technology giants in today’s world which have been frequently opined to have a strong influence on recent overall technological influence. Moreover, those tech giants have popular technology leaders leading the companies toward achieving greatness.

iOS app development

The Future of iOS App Development: Trends to Watch

When it launched in 2008, the Apple App Store only had 500 apps available. By the first quarter of 2022, the store had about 2.18 million iOS-exclusive apps. Average monthly app releases for the platform reached 34,000 in the first half of 2022, indicating rapid growth in iOS app development.