Home  separator  Styling  separator  Styles
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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>
 
 




Last modified: 2010-02-08 17:55:54
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
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..
Asha.MP
Commented on 12.October 2010
I like this tutorial, by this only i came to know how to use style in the WPF application. Thanks a lot
sanindra...
Commented on 16.November 2010
hello,
i have studied your whole artical,due to your artical today i can say this i can deevelop WPF application also.i am very -very thanks full to you.I have just develop one application in WPF(just like one inventory manegment system) and i need to deploy that application to client,can u help me out to make installer of this application.I have database in sql server 2005, and also i am generating Crystal reports.
thanks
shankar
Commented on 3.December 2010
Hi sir, i have small doubt.Can i add css to wpf applications? and can i add styles for windows. means in ResourcesDictionary?
Rajesh
Commented on 10.January 2011
Very nice
ShoneenJvV
Commented on 22.January 2011
Wonderful straight forward and easy tutorial. And previous comments assisted me as well to get it working first time!

Thank you so much!
Sajjad...
Commented on 19.February 2011
How to make themes and make them selected at runtime?
is it possible to only change the name of theme and styles get applied?
Rajesh
Commented on 13.May 2011
@Ashsish, How you created buttons in the comments?
YH
Commented on 16.May 2011
Hi, I have applied Styles to all buttons to have a certain heights, margins, but buttons inside my dateTimePicker and Datagrid are displaced, is there a way to exclude buttons that are inside such controls ?

Thanks
A
Commented on 21.May 2011
Really good explanation .keep it up.
Anon
Commented on 3.June 2011
Thanks!
avi
Commented on 21.June 2011
&lt;StackPanel Orientation=\&quot;Horizontal\&quot; VerticalAlignment=\&quot;Top\&quot;&gt;
&lt;Button Background=\&quot;Orange\&quot; FontStyle=\&quot;Italic\&quot;
Padding=\&quot;8,4\&quot; Margin=\&quot;4\&quot;&gt;Styles&lt;/Button&gt;
&lt;Button Background=\&quot;Orange\&quot; FontStyle=\&quot;Italic\&quot;
Padding=\&quot;8,4\&quot; Margin=\&quot;4\&quot;&gt;are&lt;/Button&gt;
&lt;Button Background=\&quot;Orange\&quot; FontStyle=\&quot;Italic\&quot;
Padding=\&quot;8,4\&quot; Margin=\&quot;4\&quot;&gt;cool&lt;/Button&gt;
&lt;/StackPanel&gt;
a
Commented on 7.July 2011
The disadvantage is that you cannot make a style if you don't know what style it is based on (if it is dynamic). Maybe you could set it in code.
&lt;Window&gt;
&lt;Window.Resources&gt;
&lt;Style x:Key=&quot;myStyle&quot; TargetType=&quot;Button&quot;&gt;
&lt;Setter Property=&quot;Background&quot; Value=&quot;Orange&quot; /&gt;
&lt;Setter Property=&quot;FontStyle&quot; Value=&quot;Italic&quot; /&gt;
&lt;Setter Property=&quot;Padding&quot; Value=&quot;8,4&quot; /&gt;
&lt;Setter Property=&quot;Margin&quot; Value=&quot;4&quot; /&gt;
&lt;/Style&gt;
&lt;/Window.Resources&gt;

&lt;StackPanel Orientation=&quot;Horizontal&quot; VerticalAlignment=&quot;Top&quot;&gt;
&lt;Button Style=&quot;{StaticResource myStyle}&quot;&gt;Styles&lt;/Button&gt;
&lt;Button Style=&quot;{StaticResource myStyle}&quot;&gt;are&lt;/Button&gt;
&lt;Button Style=&quot;{StaticResource myStyle}&quot;&gt;cool&lt;/Button&gt;
&lt;/StackPanel&gt;
&lt;/Window&gt;
Atif
Commented on 20.July 2011
&lt;input type=button onclick='Styles are great' value='WoW' /&gt;
fsfsfdfdgd
Commented on 20.July 2011
&lt;StackPanel Orientation=&quot;Horizontal&quot; VerticalAlignment=&quot;Top&quot;&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;Styles&lt;/Button&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;are&lt;/Button&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;cool&lt;/Button&gt;
&lt;/StackPanel&gt;
Vasu
Commented on 22.July 2011
Just amazing! Thanks!
Aykut
Commented on 26.July 2011
Clear and helpfull. Thank you.
Aykut
Commented on 26.July 2011
Clear and helpfull. Thank you.
bri
Commented on 24.August 2011
&lt;StackPanel Orientation=&quot;Horizontal&quot; VerticalAlignment=&quot;Top&quot;&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;Styles&lt;/Button&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;are&lt;/Button&gt;
&lt;Button Background=&quot;Orange&quot; FontStyle=&quot;Italic&quot;
Padding=&quot;8,4&quot; Margin=&quot;4&quot;&gt;cool&lt;/Button&gt;
&lt;/StackPanel&gt;
asd
Commented on 28.August 2011
&lt;strong&gt;How to use styles defined in App.xaml ?&lt;/strong&gt;
Aly Sangadji
Commented on 13.September 2011
Thank's..Great... :)

Name
E-Mail (optional)
Comment