Styles in XAML
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.
Example style applied to a Button element
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="Red" />
Value="White" />
Value="100" />
Content="A Red Button"/>
Example Style targeting a specific type of element
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="200" />
Value="50" />
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.
Extending a Style using the BasedOn attribute
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="200" />
Value="50" />
BasedOn="{StaticResource MyStyle}">
Value="300"/>
Value="Bold" />
Content="I use MyStyle"/>
Content="I use MyStyle2"/>
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
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="Red" />
Value="White" />
Value="100" />
Content="A Red Button"/>
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
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="200" />
Value="50" />
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
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
Value="200" />
Value="50" />
BasedOn="{StaticResource MyStyle}">
Value="300"/>
Value="Bold" />
Content="I use MyStyle"/>
Content="I use MyStyle2"/>
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.