Silverlight offers many ways to customize the appearance of your applications. Styles enable you to set control properties and reuse those settings for a consistent appearance across multiple controls.

This QuickStart contains the following sections:

Style Basics

Styles enable you to extract visual property settings into reusable resources. The following example shows three buttons with a style that sets the BorderBrush, BorderThickness and Foreground properties. By applying a style, these properties do not have to be set on each control, but the controls all have the same appearance.

You can create styles as a resource or inline. You typically create styles as resources in the UserControl (MainPage.xaml) or Application (App.xaml) XAML files, but you can set them inline. Whether a style that is created as a resource or inline, it should contain the following:

• TargetType attribute
• A Setters collection with one or more Setter elements

A style can optionally contain the following:

• x:Key attribute

The TargetType attribute is a string that specifies a FrameworkElement the style should be applied to. The TargetType value must specify a FrameworkElement-derived type in the Silverlight runtime or a referenced assembly. If you attempt to apply a style to a control that does not match the TargetType attribute, an exception will occur.

Each Setter element requires a Property and a Value. These property settings indicate what control property the setting applies to, and the value to set for that property. Setter.Value can be set with attribute or element syntax. The following XAML shows the style demonstrated in the previous example. In this XAML, the first two Setter elements use attribute syntax, but the last Setter, for the BorderBrush property, uses element syntax. The example does not use the x:Key attribute, so the style is implicitly applied to the buttons. Applying style implicitly or explicitly is explained in the next section.

XAML

<UserControl.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
</UserControl.Resources>
  

Applying an Implicit or Explicit Style

There are two ways to apply styles to your controls:

• Implicitly, by only specifying a TargetType for the Style.
• Explicitly, by specifying a TargetType and an x:Key attribute for the Style and then by setting the target control's Style property to this key.

If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to the keyed style. In contrast, a style without an x:Key attribute is automatically applied to every control of its target type, if the control does not have an explicit style setting.

The following example shows two buttons that demonstrate implicit and explicit styles.

The following XAML shows the two styles and the two buttons in the previous example. In this example, The first style has has an x:Key attribute and its target type is Button. The first button's Style property is set to this key, so this style is applied explicitly. The second style is applied implicitly to the second button because its target type is Button and it does not have an x:Key attribute.

XAML

<UserControl.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="DarkOrchid" />
        <Setter Property="Effect" >
            <Setter.Value>
                <DropShadowEffect Color="Black" Direction="320" ShadowDepth="15" 
                            BlurRadius="5" Opacity="0.2" />
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="OrangeRed" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="OrangeRed" />
    </Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" Height="132" Width="197">
    <Button Content="Button" Height="23" HorizontalAlignment="Left"
        Margin="60,12,0,0" Name="Button1" VerticalAlignment="Top" Width="75"
        Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" HorizontalAlignment="Left"
        Margin="65,52,0,0" Name="Button2" VerticalAlignment="Top" Width="75"  />
       
</Grid>

Using Based-On Styles

To make styles easier to maintain and to optimize style reuse, you can create styles that inherit from other styles. You use the BasedOn property to create inherited styles. Styles that inherit from other styles must target the same type of control or a control that derives from the type targeted by the base style. For example, if a base style targets ContentControl, styles that are based on this style can target ContentControl or types that derive from ContentControl such as Button and Label. If necessary, based-on styles can override values in the base style. The following example shows a Button and a CheckBox with styles that inherit from the same base style.

The following shows the XAML in the previous example. The base style targets ContentControl, and sets the the Height, Width, and Effect properties. The styles based on this style target CheckBox and Button, which derive from ContentControl. The based-on styles set different colors for the Border and Foreground properties.

XAML

<UserControl.Resources>
<Style x:Key="BasicStyle" TargetType="ContentControl">
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="30" />
    <Setter Property="Effect" >
        <Setter.Value>
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="15" 
                        BlurRadius="5" Opacity="0.2" />
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="Button" BasedOn="{StaticResource BasicStyle}">
    <Setter Property="BorderBrush" Value="OrangeRed" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Foreground" Value="OrangeRed" />
</Style>
<Style TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
    <Setter Property="BorderBrush" Value="Green" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Foreground" Value="Green" />
</Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
       
        <Button Content="Button" HorizontalAlignment="Left" Margin="84,69,0,0" 
                Name="Button1" VerticalAlignment="Top" />
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" 
                  Margin="92,107,0,0" Name="CheckBox1" VerticalAlignment="Top" />
    </Grid>

See Also

• Getting Started with Controls
• Control Customization