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
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