Styles in Silverlight

In this article I'm going to share my knowledge about Styles in Silverlight.

Let's see an example about Styling a Button.

A Style is a collection of property values that you can apply to an element in one step. A style allows us to encapsulate control property values as a reusable resource. Silverlight supports only explicit styles. Styles are similar to CSS (Cascading Style Sheet) standard in HTML markup. We can set different properties for an element and store it in a name and then we can re-use it in our application. Before going to create a style, we should decide where to put it. We can store the Style in Resource property of a Control.

Every Style Element requires a Key, so that we can refer it anywhere using their Key. It supports only named types. It requires TargetType, which is the type of an element on which you r applying a style.

There are three ways to use Styles:

1. You can apply styles to particular page.
2. You can apply styles to particular Control.
3. You can apply styles globally.

Let us see all the steps one by one.

1. Applying Styles to a particular page:

Defining:
   
First we need to define the style in UserControl.Resource section like,



A Setter element is a definition of one property to set on the target object. A Setter has a two Property one is Property naming the property to set on the target and another one is Value property defining the value to set on the property.

Here is your Page.xaml code:

<UserControl x:Class="styling.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
       <UserControl.Resources>
        <Style x:Key="MyStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontFamily" Value="Georgia"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </UserControl.Resources>
 </UserControl>

Applying:

Then you can apply the style which you have created using the Style property of a Button as shown in the below code.

<UserControl x:Class="styling.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
       <UserControl.Resources>
        <Style x:Key="MyStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontFamily" Value="Georgia"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </UserControl.Resources>
    <!-- Applying Style-->
    <Grid x:Name="LayoutRoot">
        <Button x:Name="mybut" Content="Styling" Width="70" Height="50" Style="{StaticResource MyStyle}"/>
    </Grid>
</UserControl>

2. Applying Styles to a particular Control:
 
To use Style for a particular Control, place the style directly in the control. Here, no need to mention the x:Key attribute.

For Example,

<UserControl x:Class="styling.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
  <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Styling">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="Blue"/>
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="Fontsize" Value="32"/>
                    <Setter Property="Width" Value="100"/>
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="BorderThickness" Value="2"/>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
 </UserControl>

3. Applying Styles Globally:

To use the Styles globally, i.e., you can use the Styles in any xaml pages throughout your application, for that you need to define the Style in Application.Resource in App.xaml file.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="styling.App">         

    <Application.Resources>
        <Style x:Key="sty1" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Fontsize" Value="32"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Style>
    </Application.Resources>     
</Application>

Here is your xaml file.

<UserControl x:Class="styling.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">   

    <Grid x:Name="LayoutRoot">
        <!-- Apply Style -->
        <Button x:Name="mybut1" Content="Styling" Style="{StaticResource sty1}"/>
    </Grid>
</UserControl>

Hope you have understood this article.