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.
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.
|
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... :)
|
|
|