Control styles in WPF

Windows Presentation foundation offers great functionality to change the look and feel of the application UI. Basically, every object in WPF, be that a button, a text box or anything else can have a different look compared to the default appearance.

With XAML present, most of the modifications to the UI are done through it. If you are changing the UI at design time in the code-behind, for a WPF application, you are doing it wrong. Control customization can start with simple property modification and can go as far as modifying the appearance depending on the control behavior.

Now, let’s suppose I want to create a gradient background for a button. I simply create a button control in the window (or page, depending on the type of the developed WPF application) and change the Background property by introducing the LinearGradientBrush element:

<Button Height="31" Width="84" Margin="227,12,235,298" Content="Welcome">
    <Button.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
            <GradientStop Color="#D80000" Offset=".2" />
            <GradientStop Color="#780000" Offset=".5" />
            <GradientStop Color="#280000" Offset="1" />
        </LinearGradientBrush>
    </Button.Background>
</Button>

Looks cool. I can do the same for several buttons. But what if there are 20 buttons like that? What about multiple buttons spread across the application? Changing the Background property the way I did above is not the optimal way in this case. Of course, you still can do it, but the markup code will become extensive, and mostly redundant, since this can be simplified.

The simplifications is tied to styles. In WPF, styles have similar behavior as CSS for HTML pages – they have no control implementation or declaration, they don’t define behavior, but they set the control appearance. Using styles can help the developer to carry existing property sets across multiple controls of the same type.

Going back to the example I’ve shown above, I am going to create a style that will be the carrier of the gradient background. To do this, in my window (replace this term with page, in case you are working on a navigation WPF application) I create a <Window.Resources> element:

<Window x:Class="WPF_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="380" Width="568" Loaded="Window_Loaded">
    <Window.Resources>

    </Window.Resources>

    <Grid>
        <Button Height="31" Width="84" Margin="227,12,235,298" Content="Welcome" />
    </Grid>
</Window>

This will be the placeholder for the resources used by the window. Styles are included here.

NOTE: If you want to make styles available application-wide, then you can open the App.xaml file (if you are using Visual Studio, you can find it in the Solution Explorer window) and place the styles inside the <Application.Resources> element.

My style looks like this:

<Style x:Key="CustomButton" TargetType="Button">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                <GradientStop Color="#D80000" Offset=".2" />
                <GradientStop Color="#780000" Offset=".5" />
                <GradientStop Color="#280000" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

As you see, the style is defined pretty much the same way a property is set for an individual control. However, every property is defined via the Setter element. The Key property assigned to the style is its unique identifier – its name, later used when referencing it. The TargetType property defines the control type, to which the style can be applied.

Mind, though, that TargetType can either be set to a specific control type, or a base type (for example, Control) that has the same properties. To do this, I can set its value to {x:Type Control} and later on I will be able to apply it to controls like buttons or text boxes.

Once the style is ready, it is easily applied to the control of choice by setting the Style property to {StaticResource CustomButton}. CustomButton in this case is the name of my style, and I can change it to a different one. A control cannot have multiple styles; however, styles can be inherited.

Here is an example of a base style and a style that inherits it:

<Style x:Key="CustomButton" TargetType="{x:Type Control}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                <GradientStop Color="#D80000" Offset=".2" />
                <GradientStop Color="#780000" Offset=".5" />
                <GradientStop Color="#280000" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="FontStyle" Value="Italic" />
</Style>

<Style x:Key="AnotherCustomButton" BasedOn="{StaticResource CustomButton}" TargetType="{x:Type Control}">
    <Setter Property="Foreground" Value="White"></Setter>
</Style>

The inheritance is set by the BasedOn property. If I assign the AnotherCustomButton style to a control, I will set the style based both on CustomButton and AnotherCustomButton.

An important thing to keep in mind is the fact that if the inheriting property (as AnotherCustomButton) overrides a property value, the property used in this specific style will be used, instead of the one declared in the base style.