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.
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.
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.
|
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 |
<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>
|
|
|
|
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.
<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>
|
|
|
|
Atif | |
|
Commented on 20.July 2011 |
<input type=button onclick='Styles are great' value='WoW' />
|
|
|
|
fsfsfdfdgd | |
|
Commented on 20.July 2011 |
<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>
|
|
|
|
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 |
<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>
|
|
|
|
asd | |
|
Commented on 28.August 2011 |
<strong>How to use styles defined in App.xaml ?</strong>
|
|
|
|
Aly Sangadji | |
|
Commented on 13.September 2011 |
Thank's..Great... :)
|
|
|