The concept of style should not be unfamiliar for you since
you have already seen it in HTML, XHTML and CSS. Styles help you to declare an
appearance for a special element or declare a style for a specific type of
elements.
Each style consists of a key as its identifier to let you
refer to it via other elements (if you are declaring a style locally for an
element, you can ignore the key attribute) and a collection of Setter elements
that you declare your appearance via them. Key is a part of XAML namespace so
you should use XAML prefix to refer to it ("x:" in my samples). You
can also use a TargetType attribute for your style to specify the type of
element that your style will be applied to.
Listing 6 represents the simplest way to declare a style for
a Window then use it for your elements. Figure 3 shows the output.
Listing 6
<Window x:Class="ResourcesInXAML.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Resources In XAML" Height="150" Width="300"
>
<Window.Resources>
<Style x:Key="myStyle">
<Setter Property="Control.Background" Value="MediumSlateBlue" />
</Style>
</Window.Resources>
<StackPanel Margin="30">
<Button Style="{StaticResource myStyle}"
Width="200" Height="40">
ASP Alliance
</Button>
</StackPanel>
</Window>Figure 3
Listing 7 and Figure 4 are good examples to show that if you
use TargetType attribute for your style and do not refer to it in your
elements, this style will be applied to all elements of that type.
Listing 7
<Window x:Class="ResourcesInXAML.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Resources In XAML" Height="150" Width="300"
>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Control.Background" Value="GreenYellow" />
</Style>
</Window.Resources>
<StackPanel Margin="30">
<Button Width="200" Height="40">
ASP Alliance
</Button>
</StackPanel>
</Window>Figure 4
The last point about styles is they have an object oriented
manner (you can remember that XAML elements represent CLR classes). Therefore,
you can inherit your styles from another style and extend it. All you need to
do to inherit a style from another style is to declare BasedOn attribute for
that style and set it to another resource that you want to inherit from.
Listing 8 and Figure 5 show an example of inheritance for
styles.
Listing 8
<Window x:Class="ResourcesInXAML.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Resources In XAML" Height="150" Width="300"
>
<Window.Resources>
<Style x:Key="ParentStyle">
<Setter Property="Control.Background" Value="Red" />
</Style>
<Style x:Key="Child" BasedOn="{StaticResource ParentStyle}">
<Setter Property="Control.Foreground" Value="Black" />
</Style>
</Window.Resources>
<StackPanel Margin="30">
<Button Width="200" Height="40" Style="{StaticResource Child}">
ASP Alliance
</Button>
</StackPanel>
</Window>Figure 5
