Control templates in Visual C#.NET

Creator PDF 417 in Visual C#.NET Control templates

As strange as it may sound, controls in WPF are look-less. They have defined behavior but no appearance. This gives ultimate flexibility because you can completely control the way that a control is presented. If you had to define the way every single control looked before you could use it, you wouldn t be terribly productive. You don t have to do this, though, because every control has a default control template a definition of how the control should be displayed. The default control template controls how the button should be drawn in its normal state, as well as in special states such as mouse over, clicked, that sort of thing. The default templates are defined as part of themes and so can be different depending on the currently selected theme we ll talk about that later. Although you can override the template for an individual control, you ll more often create a style that overrides the look-and-feel.

Creating a control template One of the properties of a control is its template, which defines how it looks and behaves in general. We say in general because the template still takes some directing. For example, the template might say that the control has a rectangle as its background, but the color or fill of that rectangle might be overridden by any particular control. Because the template is a property, it can be set as part of a style. In fact, this is the most common way of defining a new control template. For example, we can modify the Button style to change all the buttons into ellipses (listing 6.9).

<Style x:Key="CalcButton" TargetType="Button"> <Setter Property="Template"> Sets template <Setter.Value> property <ControlTemplate TargetType="Button"> <Ellipse Fill="LightGreen" /> Sets content </ControlTemplate> to ellipse </Setter.Value> </Setter> <Setter Property="Control.Margin" Value="10"/> </Style>

All we re doing here is setting the Template property b via the style. In this case, we set the content to be a light green ellipse c. When the code is run, any controls that use this style replaces their control templates with the template here (figure 6.8). Depending on how late you were up last night, you may or may not notice a slight problem with the calculator. In fact, there are several problems. Aside from the obvious there s no longer text on the buttons the buttons no longer act like buttons. There are no visual clues when you move over the button or click the button. The buttons do still work, though you can click them and do calculations provided you have a good memory for where the various digits and operators are located.

Figure 6.8 We ve replaced the Button style to use an ellipse. Unfortunately, we ve now lost the text from the buttons.

ContentPresenters To make the text show up again, we need to tell the system where to put that content. Fortunately, this is pretty easy. There s a special framework element called a ContentPresenter. When you put a ContentPresenter into a control template, WPF shoves the control s content wherever the content presenter says. As always, there s a wrinkle. A template can only hold a single framework element. You can put an ellipse there, or

a rectangle, or any one thing, but you can t put an ellipse and a rectangle or, most importantly for our purposes, an ellipse and a content presenter. This is the same issue you have when you re adding controls anywhere. Most places only support a single control, but that single control can be anything including a layout panel. And a layout panel can hold any number of children. For simplicity, let s use a Grid layout panel (because this is the default) without adding any rows or columns so that it behaves like a Canvas, but with more support for positioning. Here s the XAML for the ControlTemplate (the rest of the style definition is unchanged):

<ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="LightGreen"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate>

By adding the Grid, we can add two controls; the ellipse and the ContentPresenter. The ContentPresenter has both horizontal and vertical alignment set to center, so the content will be centered. Now if we run the calculator, we get our text back (figure 6.9). It is worth mentioning that the content presenter presents whatever content the button had. For example, if we were drawing pictures on the buttons, or had other embedded controls, they would count as the content and would appear where the content presenter said. This is a key mechanism behind composition.