Introducing Control Templates

WPF controls have a particular structure, in which the layout system is separated from the behavior. When searching resources about WPF controls, you often find a definition stating that they are lookless. This means that WPF controls simply have no default aspect, whereas they expose a common set of properties that can be assigned for defining the layout and the behavior. This common set is referred to as control template. The WPF system provides a default control template for each available control in the Base Class Library. You can then override the existing template or create a custom one. Control templates are so versatile because you can completely redesign the control look while keeping its original behavior, but you can also improve the behavior. For example, you can use an Ellipse as a control template for a Button. The new Button will look like an Ellipse, but your user can still click it and you can still handle button events.

Basically control templates are implemented as styles, but actually they are not simple styles. The difference between styles and templates is that styles affect existing properties within an existing template, whereas a control template can completely override or replace properties and layout of a control. Talking in code terms, a control template is defined within a Style definition, setting the Template property and assigning the Value of this property. Code in Listing 33.3 shows how to utilize an Ellipse as the control template for buttons, where the background gradient color changes when the button is pressed or when the mouse pointer flies over it.

Listing 33.3 Building a Control Template

If you look at the code, you can notice how the button default aspect is replaced by an Ellipse within the ControlTemplate value of the Template property. Probably some concepts you learned about styles help you understand what is happening. Triggers enable changing the background color according to specific mouse actions. Don’t forget to add the ContentPresenter element in your custom templates because it enables showing text or other UI elements within your control. Generally control templates are assigned to controls using the DynamicResource markup extension. The following XAML line assigns the above custom control template to a button:

Changes will be also automatically reflected at design time. You can also assign an event handler for the Click event to ensure that everything is working fine:

Figure 33.11 shows how the button looks within the running application when the mouse pointer passes over it.

Figure 33.11 The custom control template designs a button as an ellipse.