Introducing Styles

One of the biggest benefits of WPF user controls is that their layout is completely customizable. As explained further in the “Introducing Control Templates” section, you can completely redefine their layout and behavior using templates. There are situations in which you have multiple controls of the same type and you want them to have the same properties. For example, you might want to implement three buttons and each button should have the same width, height, and font as the other ones. To avoid the need of applying the same properties for each control, which can be annoying if you have dozens of controls, you can define a Style. A style is an instance of the System.Windows.Style class and enables you to define a set of common properties for the specified type of control. Styles are defined within the Resources section of a Window, of panels, or at application level (Application.xaml file). Each style must have an identifier assigned via the x:Key attribute and is applied to controls assigning their Style property. Code in Listing 33.1 defines a style for buttons and applies the style to three buttons in the interface.

Listing 33.1 Defining and Assigning a Style for Buttons

Understanding the scope of styles is important. In the code example the style is defined at the panel level, meaning that buttons outside the panel cannot get the style applied. Notice how the TargetType property enables specifying the target control type. If not specified, WPF assumes FrameworkElement as the target. Properties are specified via Setter elements. Each setter requires the target Property specification and its value. You can also define a complex value splitting its definition creating a Setter.Value node, which can store multiple lines of XAML code, as in Listing 33.1 where the technique is used to define a LinearGradientBrush gradient. Finally notice how the new style is assigned to buttons setting the Style property, pointing to the style identifier via a XAML markup extension named StaticResource.

Running the code can produce the interesting result shown in Figure 33.10.

Figure 33.10 Styling multiple controls of the same type with Styles.

On the Visual Basic side, you create and apply a style as in the following code snippet:

This can be particularly useful if you need to generate a style at runtime, although you generally define styles at design time; therefore, declaring and applying them via XAML is the most preferable way (so that designers can eventually take advantage of XAML for their work).