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.

Targeting Controls by Type

Sometimes you will want all of the controls of a particular type to have the same style. In this situation, setting the Style property of each control is repetitive and prone to error. It can be more appropriate to set a style based upon the control type and have it applied automatically. NB: to override a style set on a control type, you can set the Style property or the individual control properties explicitly.

To set a style for a control type, you include the TargetType property but do not set a resource key. Try adding the following style to the resources. This formats all buttons, changing the font and the background colour. Note the use of property element syntax in the Background setter to allow the definition of a linear gradient brush.

<Style TargetType="Button">
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightGray" Offset="0.1"/>
                <GradientStop Color="Gray" Offset="0.8"/>
                <GradientStop Color="DarkGray" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

Run the program to see the results. The buttons should be restyled to appear similar to the image below:

WPF styles with targeting by type

Style Inheritance

To allow the fast creation and easy updating of similar styles, you can base one style upon another. To do so, you add an extra property to the Style object. The BasedOn property should reference the style to be extended. Any property that exists in the parent style and not in the child style is inherited. If a property is declared in both styles, the child's value is used.

Remove the existing button style from the app.xaml and replace it with the two styles below:

<Style x:Key="NormalButton" TargetType="Button">
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightGray" Offset="0.1"/>
                <GradientStop Color="Gray" Offset="0.8"/>
                <GradientStop Color="DarkGray" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="HighlightedButton" TargetType="Button"
       BasedOn="{StaticResource NormalButton}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightCoral" Offset="0.1"/>
                <GradientStop Color="Red" Offset="0.8"/>
                <GradientStop Color="DarkRed" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

The first style is designed to be used with a standard button. It applies bold, white text and a grey gradient background colour. The second style inherits from the first but switches to a red gradient for the background, allowing a button to be highlighted. Note the use of the BasedOn property, which is bound to the "NormalButton" resource. This causes the text colour and font weight to be inherited.

We need to update the two buttons to reference the styles. Change the XAML for the buttons, as shown below:

<Button Content="OK"
            Width="85"
            VerticalAlignment="Center"
            Margin="0 0 10 0"
            ToolTip="Login with the entered credentials"
            Style="{StaticResource HighlightedButton}"/>
<Button Content="Cancel"
            Width="85"
            VerticalAlignment="Center"
            ToolTip="Cancel the login and exit"
            Style="{StaticResource NormalButton}"/>

The first button is linked to the "HighlightedButton" style, which has a red background. The second uses, "NormalButton", with its grey background. Both have the white, bold text from the "NormalButton" style.

WPF style inheritance

2 April 2015