Section 5.2. Using Styles

5.2. Using Styles

A Style is a set of properties applied to an element that can be used to describe the appearance of an element. It is used in a similar manner as styles declared in CSS. A style can be applied locally to a single element, or it can be declared globally and referenced from the element. Styles can also be declared such that they affect all instances of a given type, such as Button.

A XAML Style is a collection of one or more Setter elements that act upon a specified dependency property, such as Background or Foreground. Remember that a Key value is required if the style will be applied by reference to an element. In Example 5-4, the Style MyStyle is declared as the value of the Style element on the Button, which sets the background, foreground, and width attributes to the values specified by the Style declaration.

Example 5-4. Example style applied to a Button element

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">     <Page.Resources>         <Style             x:Key="MyStyle">            <Setter                 Property="Control.Background"                 Value="Red" />            <Setter                 Property="Control.Foreground"                 Value="White" />            <Setter                Property="Control.Width"                Value="100" />         </Style>     </Page.Resources>     <StackPanel>         <Button             Style="{StaticResource MyStyle}"             Content="A Red Button"/>     </StackPanel> </Page> 

Figure 5-1 shows the result of evaluating Example 5-4 in XamlPad.

Figure 5-1. Application of a global style to a Button

Styles can also be applied to a class of elements by assigning the TargetType attribute of Style to the desired element type. Example 5-5 shows an example of applying a defined width and height to all elements of type Button.

Example 5-5. Example Style targeting a specific type of element

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">     <Page.Resources>         <Style             TargetType="{x:Type Button}">             <Setter                 Property="Width"                 Value="200" />             <Setter                 Property="Height"                 Value="50" />         </Style>     </Page.Resources>     <StackPanel>         <Button             Content="A Button"/>         <Button             Content="Another Button"/>     </StackPanel> </Page> 

In this example, we have omitted the Control prefix from the declared properties. This is because the style is targeting a specific type, namely Button, which inherits both properties used in the style (Background and Foreground) from Control. It is not necessary to prefix the property values when targeting a specific element type because of scoping rules, unless the property derives from a class outside the targeted element's hierarchy.

The result of evaluating Example 5-5 is shown in Figure 5-2.

Figure 5-2. Result of evaluating Example 5-5 in XamlPad

In Example 5-5, neither Button element specifies its width or height. As discussed in Chapter 4, StackPanel defaults to a horizontal alignment value of Stretch. That means that elements added to the StackPanel with no specified width should fill the width of the panel. Yet when the XAML code in this example is interpreted, it will display both Button elements as though they have a specified height and width because the style is applied to all Button elements. Using the Style declared in Example 5-5 has the same effect as specifying the Width and Height attributes inline on both Button elements but saves space and makes changes to their appearance faster and with less margin for error.

Style is an extremely flexible element and, like all XAML elements, it can be extended to suit your needs. While other elements require code to be extended, Style can be extended purely within XAML by using the BasedOn attribute.

Extending Style using the BasedOn mechanism is like customizing a new car. You start with a "base" style and then specify changes such as color, heated seats, power windows, etc., that change the appearance of the final product. The plant that customizes your car applies all the base attributes to it but also makes the changes you specified, essentially assigning a new "style" to your car.

This technique is useful when you're given a standard corporate style to work with but are allowed to modify certain aspects of the style or to define previously undefined attributes. BasedOn allows you to essentially subclass a Style, much like using the Inherits VB.NET keyword to define a subclass. Example 5-6 demonstrates the use of BasedOn to extend a Style.

Example 5-6. Extending a Style using the BasedOn attribute

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">     <Page.Resources>         <Style             x:Key="MyStyle">             <Setter                 Property="Control.Width"                 Value="200" />             <Setter                 Property="Control.Height"                 Value="50" />         </Style>         <Style             x:Key="MyStyle2"             BasedOn="{StaticResource MyStyle}">                 <Setter                     Property="Control.Width"                     Value="300"/>                 <Setter                     Property="Control.FontWeight"                     Value="Bold" />         </Style>     </Page.Resources>     <StackPanel>         <Button             Style="{StaticResource MyStyle}"             Content="I use MyStyle"/>         <Button             Style="{StaticResource MyStyle2}"             Content="I use MyStyle2"/>     </StackPanel> </Page> 

As with polymorphism in object-oriented languages, overriding a Property value in a new Style that has been defined in its BasedOn style applies the new Style's property whenever it is used. If the base style has not defined the property, then the new property is automatically used when it is referenced.

In Example 5-6, the width of the Button that references MyStyle2 is 300, while the background of the Button referencing the style MyStyle has a width of 200. However, only the text on the Button that references MyStyle2 will be bold, because the property Control.FontWeight has not been declared as part of MyStyle. Figure 5-3 shows the result of evaluating Example 5-6 with XamlPad.

Figure 5-3. Using the BasedOn attribute to extend a style