Styles in WPF

I would cover WPF Style feature in 2 posts.

1. Style basics

2. Style in Depth

In this post, we look at the basics of style, creating simple style and applying style.

1. Style basics

Styles are used to provide consistent look and feel to the application. Styles are similar to CSS in HTML web pages. Styles also increase code reusability and maintainability in WPF application.

Let’s start by applying some formatting to Button control.

<Button Content="Hello World" Width="150" Height="50" FontSize="14" FontWeight="Bold" Background="LightBlue" Foreground="DarkBlue"></Button>

Output:

 

Now some questions that come to mind when I see above code?

• What if I want to apply same formatting to other Button controls. I need to copy and paste the code everywhere. At times when we create custom control template there is lot of code involved. This can lead to unnecessary code duplication.
  
• What if I want make a mistake in copy paste. This will lead to UI consistency problem.
  
• What if I need to change the formatting of Button control. I need to make change everywhere for consistency. What if designer is handling customizations and there are multiple developers in team. There is code maintainability problem.

So, What’s the solution? Simple create a Style for Button control, add all formatting to that style and refer the style in other Button controls. This approach increases code reusability, provides consistent look and feel to application and improves maintainability.

Now that, We have understood the usefulness of Style, let’s jump into creating styles. We create simple style for above Button formatting.

Creating Style

<Window.Resources>
    <Style TargetType="Button" x:Key="SimpleButtonStyle">
        <Setter Property="Width" Value="150"></Setter>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Background" Value="LightBlue"></Setter>
        <Setter Property="Foreground" Value="DarkBlue"></Setter>
    </Style>
</Window.Resources>

Style class in WPF is used to define style.

TargetType property is set to the type of control for which this style is created. In our case we create style for Button control, so TargetType is set to Button. Note: As TargetType is set to Button, only properties of Button control can be used in style.

x:Key Provides unique key/name to the style we created. This key will be used to refer style in controls.

A style has collection of setters.

Setter: Each setter is used to set value of a single property of control.

And finally, Style is added as a resource to the resources collection of window so that all controls in current Window/Page can refer to the style. Refer Resources post for more details on resources.

Accessing Style in XAML

<Button Name="btnHelloWorld" Content="Hello World" Style="{StaticResource ResourceKey=SimpleButtonStyle}"></Button>

Style property of Button control is set to SimpleButtonStyle (that we created above) using StaticResource markup extension. See Markup Extensions post explains more on different types of markup extensions.

Accessing the style in code programmatically

btnHelloWorld.Style = ((Style)this.Resources["SimpleButtonStyle"]);

Output 

 

Applying style to all controls of specific type.

In above case, we have given unique key to Style and refer that key in control. If we remove unique key in Style, then style will be applied to all controls of specified TargetType i.e Button control.

Creating Style

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Width" Value="150"></Setter>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Background" Value="LightBlue"></Setter>
        <Setter Property="Foreground" Value="DarkBlue"></Setter>
    </Style>
</Window.Resources>

Applying Style

No need to set style explicitly. As above style will be applied to all Button controls of current page/window implicitly.

<Button Content="Hello World"></Button>

If we want individual element to opt-out of style, we can explicitly set style of that element to Null.

<Button Content="Hello World" Style="{x:Null}"></Button>

Style in depth

We have seen basic syntax of Style but Style has lot more to offer. We would cover complete syntax of Style in next post “Style in Depth”.