Defining Styles in XAML

The following excerpt from the newest XAML book, XAML Developer Reference, describes how to define styles in XAML.

Defining Styles

You define styles in XAML using the Style element. The Style element has a TargetType attribute that specifies the object to which the style will be applied and a Key attribute to uniquely identify the style. You will use this Key value later with the StaticResource markup extension to apply the style. A Style element contains one or more Setter elements. A Setter element has a Property attribute that specifies which property this Setter is changing and a Value attribute that specifies the property value.
The following XAML snippet shows a simple example of defining a style:

<!-- Insert in a Silverlight application -->
<UserControl.Resources>
      <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="FontSize" Value="16" />
      </Style>
</UserControl.Resources>
<StackPanel>
          <Button Content="Submit" Width="150" Height="60"
          Style="{StaticResource ButtonStyle}" x:Name="b1"/>
          <Button Content="OK" Width="150" Height="60"
           Style="{StaticResource ButtonStyle}" x:Name="b2"/>
         <RadioButton Content="Business"></RadioButton>
</StackPanel>

The preceding code defines a style resource named ButtonStyle that creates a font style that you want to apply to objects of type Button. The Style contains only one Setter element that sets the FontSize property. In the preceding markup, within the StackPanel, you create three controls:

<StackPanel>
                    <Button Content="Submit" Width="150" Height="60"
                    Style="{StaticResource ButtonStyle}" x:Name="b1"/>
                   <Button Content="OK" Width="150" Height="60"
                   Style="{StaticResource ButtonStyle}" x:Name="b2"/>
                  <RadioButton Content="Business"></RadioButton>
</StackPanel>

However, you apply the style only to the Button controls, excluding the RadioButton control. This is for two reasons: first, the TargetType of the style is set to be Button; second, the Style property of the Button controls is explicitly set to ButtonStyle.
Even if you apply the ButtonStyle to the RadioButton control, it will not succeed; in fact, doing so will result in an exception, because the TargetType of the style is Button.


Note You must set the TargetType property when you create a style. If you do not, the XAML processor throws an exception.

Instead of using attribute syntax, you can also use property element syntax to define styles. The following XAML snippet shows an example of this:

<!-- Insert in a Silverlight application -->
<UserControl.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Color="Black" Offset="0.75"/>
                        <GradientStop Color="Orchid"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
 </UserControl.Resources>
<StackPanel>
            <Button Content="Submit" Width="150" Height="60" Style="{StaticResource ButtonStyle}" x:Name="b1"/>
</StackPanel>

This is a more elaborate approach to defining styles. Developers often prefer the more compact approach of using attributes with styles.

To learn more about working with XAML, take a look at the book, XAML Developer Reference.