Introduction to Styles in WPF

Introduction

Imagine you want to create an application with a unique design. All your buttons should have an orange background and an italic font. Doing this the conventional way means that you have to set the Background and the FontStyle property on every single button.

 
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
    <Button Background="Orange" FontStyle="Italic" 
            Padding="8,4" Margin="4">Styles</Button>
    <Button Background="Orange" FontStyle="Italic" 
            Padding="8,4" Margin="4">are</Button>
    <Button Background="Orange" FontStyle="Italic" 
            Padding="8,4" Margin="4">cool</Button>
</StackPanel>
 
 

This code is neither maintainable nor short and clear. The solution for this problem are styles.

The concept of styles let you remove all properties values from the individual user interface elements and combine them into a style. A style consists of a list of setters. If you apply this style to an element it sets all properties with the specified values. The idea is quite similar to Cascading Styles Sheets (CSS) that we know from web development.

To make the style accessible to your controls you need to add it to the resources. Any control in WPF have a list of resources that is inherited to all controls beneath the visual tree. That's the reason why we need to specify a x:Key="myStyle" property that defines a unique resource identifier.

To apply the style to a control we set the Style property to our style. To get it from the resources we use the {StaticResource [resourceKey]} markup extension.

 
<Window>
    <Window.Resources>
        <Style x:Key="myStyle" TargetType="Button">
           <Setter Property="Background" Value="Orange" />
           <Setter Property="FontStyle" Value="Italic" />
           <Setter Property="Padding" Value="8,4" />
           <Setter Property="Margin" Value="4" />
        </Style>
    </Window.Resources>
 
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
        <Button Style="{StaticResource myStyle}">Styles</Button>
        <Button Style="{StaticResource myStyle}">are</Button>
        <Button Style="{StaticResource myStyle}">cool</Button>
    </StackPanel>
</Window>
 
 

What we have achieved now is

• A maintainable code base
• Removed the redundancy
• Change the appearance of a set of controls from a single point
• Possibility to swap the styles at runtime.

Style inheritance

A style in WPF can base on another style. This allows you to specify a base style that sets common properties and derive from it for specialized controls.

 
<Style x:Key="baseStyle">
  <Setter Property="FontSize" Value="12" />
  <Setter Property="Background" Value="Orange" />
</Style>
 
 
<Style x:Key="boldStyle" BasedOn="{StaticResource baseStyle}">
  <Setter Property="FontWeight" Value="Bold" />
</Style>
 
 

 Comments on this article

anoanimo	Commented on 2.July 2009 you write: Intrduction you are missing an 'o'
anonimo	Commented on 2.July 2009 lol and i write: ANOANIMO rather than: ANONIMO in my name PS: i dont speak english very well
Lloyd Sheen	Commented on 6.July 2009 All well and fine but where do you place the code in the XAML? I have tried putting in various places but I keep getting errors. Perhaps a "full source" code showing both of the code snippets in place.
Rahul Dwivedi	Commented on 29.July 2009 Let me know how can i use style tag because i am getting error in xaml when i Paste these thing Please
Christian Moser	Commented on 30.July 2009 Hi Rahul, styles can only be defines within resources. Resources are organized within a ResourceDictionary and can be defined on any WPF element by putting them between the <xxx.Resources> and </xxx.Resources> tags. All resources must have a unique x:Key="..." and can be references with the {StaticResource ...} markup extension on all child elements. I hope this helps. Christian
Pieter	Commented on 27.August 2009 If Raul doesn't understand that : <Window> <Window.Resources> Paste style here </Window.Resources> </Window>
DonnieB	Commented on 10.September 2009 Is there an equivilent to the App_Themes concept in WPF? I mean, can I programatically, change the style (ie, for one user, I have blue buttons, for another orange? Don
Christian Moser	Commented on 12.September 2009 Hi DonnieB, there is a similar concept in WPF also called "Themes". I currently do not have a tutorial how to do this, so have a look at the following article. http://www.nablasoft.com/alkampfer/?p=271 I hope this helps. Greetings Christian
SS	Commented on 19.October 2009 nice pice of contents to begin and bouild the concept. Thanks
Arun	Commented on 4.November 2009 Nice write up Christian appreciate your efforts,A great tutorial for beginners.Thanks for sharing
Farzad	Commented on 12.November 2009 Here is a more help for Rahul <Window x:Class="testWpf.StylesPractice.w1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="w1" Height="300" Width="300"> <Window.Resources > <Style x:Key="myStyle" TargetType="Button" > <Setter Property="Background" Value="Orange" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Margin" Value="4" /> </Style> </Window.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Style="{StaticResource myStyle}" >Styles</Button> <Button Style="{StaticResource myStyle}" >are</Button> <Button Style="{StaticResource myStyle}" >cool</Button> </StackPanel> </Window>
Abirami	Commented on 10.March 2010 Can we use an External Css file in WPF for applying styles... Thanks, Abirami.R
Abirami	Commented on 11.March 2010 Hi Chris, the link to Triggers is broken..Pls make it as available
Vinod	Commented on 9.April 2010 Gr8 Article. Thanks
Kumar	Commented on 16.April 2010 The styles is typically applied on a global level rather than a window level. If it is applied on a window level, you would need to create the style definition in every window you create. I decided to put the style definition, setters, etc. in the App.xaml file, which will define the style more globally for the whole application and it works just as well. Just my 2 cents...
nomaan	Commented on 7.May 2010 Its very simple and awesome tutorial and very much helpful
[S]	Commented on 20.May 2010 It's cool :D
Pankaj Sharma	Commented on 11.June 2010 It very Gr8 for the Beginners .... Thanks
Nam Gi VU	Commented on 24.June 2010 I like you tutorial very much! Great jobs!
Ricardo	Commented on 9.July 2010 Graciassss!
joe	Commented on 16.July 2010 What a complete tutorial.. one stop reference for WPF.. GREAT JOB... thx.
Ashish J	Commented on 30.July 2010 <Window.Resources> <Style x:Key="myStyle" TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Margin" Value="4" /> </Style> <Style x:Key="btnStyle" TargetType="Button"> <Setter Property="Background" Value="White" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Height" Value="50" /> <Setter Property="Width" Value="60"/> </Style> <Style x:Key="btnLast" TargetType="Button"> <Setter Property="Background" Value="Yellow"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="Width" Value="100" /> </Style> </Window.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Style="{StaticResource myStyle}">Styles</Button> <Button Style="{StaticResource btnStyle}">are</Button> <Button Style="{StaticResource btnLast}" >cool</Button> </StackPanel>
Ashish J	Commented on 30.July 2010 <Window.Resources> <Style x:Key="myStyle" TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Margin" Value="4" /> </Style> <Style x:Key="btnStyle" TargetType="Button"> <Setter Property="Background" Value="White" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Height" Value="50" /> <Setter Property="Width" Value="60"/> </Style> <Style x:Key="btnLast" TargetType="Button"> <Setter Property="Background" Value="Yellow"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="Width" Value="100" /> </Style> </Window.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Style="{StaticResource myStyle}">Styles</Button> <Button Style="{StaticResource btnStyle}">are</Button> <Button Style="{StaticResource btnLast}" >cool</Button> </StackPanel>
Ravikumar...	Commented on 29.August 2010 Superb tutorial..