BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Styles

The one hundred and forty-eighth part of the Windows Presentation Foundation Fundamentals tutorial considers the use of styles. These collect together a number of property values that can be applied to multiple controls for a consistent user interface.

Styles

In the previous article we looked at WPF resources, which allow you to define objects to be shared by a control and its children, an entire window or a whole application, depending upon the resource scope. One of the more common uses of resources is to define reusable styles.

A style is a collection of property values that can be applied to multiple controls. They allow you to generate a consistent user interface by creating a single style for all controls of a given type, or by defining styles that can be referenced by a number of controls individually. Changing a style centrally affects the properties of all of the controls that use it.

To simplify styles further, they support a simplified type of inheritance. You can start by creating a style that sets a number of properties. You can then create styles that are based upon the original but that add or override values. This lets you easily create and modify many similar styles.

To demonstrate styles, create a new WPF application in Visual Studio. Name the solution, "StyleDemo". Once the project is prepared, replace the XAML of the main window with the following:

<Window x:Class="StyleDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Style Demo"
        Height="200"
        Width="250">
    <StackPanel Margin="10">
        <Label Content="User" />
        <TextBox/>
        <Label Content="Password"/>
        <PasswordBox/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="60">
            <Button Content="OK"
                    Width="85"
                    VerticalAlignment="Center"
                    Margin="0 0 10 0"
                    ToolTip="Login with the entered credentials"/>
            <Button Content="Cancel"
                    Width="85"
                    VerticalAlignment="Center"
                    ToolTip="Cancel the login and exit" />
        </StackPanel>
    </StackPanel>
</Window>

The XAML creates a window that could be used as part of a simple authentication process. It includes two Labels, two Buttons, a TextBox and a PasswordBox. We'll apply styles to format the labels and the buttons.

WPF styles demo window

Defining a Style

You can set the Style property of a user interface element directly, applying a Style object with a set of property values. However, this does not promote reuse of styles. It is much more useful to define a Style object as a resource and apply it using StaticResource or DynamicResource markup.

We'll create our example styles in the app.xaml file, so that they can be shared by controls throughout the application. To do so, we need to create a new resource in the application resource dictionary. The resource will be a Style instance that contains a series of property setters. Each property setter defines a property name and a value. These values will be applied to properties of controls that use the style.

Replace the XAML for the app.xaml with the code below:

<Application x:Class="StyleDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="RequiredLabel" TargetType="Label">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Application.Resources>
</Application>

In the above example we've created a Style object as a resource with the key, "RequiredLabel". Note the TargetType attribute. This names the type of control that the style is designed to modify. Controls of this type, or its subtypes, can be modified by the style. Within the Style element are two Setter items. Each names the property to set, with the Property attribute, and the value to apply in the Value property. Our example style makes labels red and bold to indicate a required field. NB: Either property could be overridden by setting the property value on a control directly.

Switch back to the XAML for the main window. You'll see that the labels are unaffected. This is because we need to reference the resource from the Style properties. We'll do this with StaticResource references.

Update the code for the first label to set the style, as follows:

<Label Content="User" Style="{StaticResource RequiredLabel}" />

Modify the second label in a similar manner:

<Label Content="Password" Style="{StaticResource RequiredLabel}" />

The style is now applied to the two controls.

WPF styles from app.xaml

You can change the style to update all of the controls that use it. To try this, add a third setter to the RequiredLabel style, using the code below:

<Setter Property="FontStyle" Value="Italic"/>

Run the program again to see the results. The text of the labels will now be red, bold and italicised.

2 April 2015