In the previous article I described what are the different Layout Management Panels in Silverlight and how and when they are used. In this article I will describe how to create styles and apply them to different elements in Silverlight in the same way we are using CSS and apply them to HTML controls.

Styles in Silverlight are powerful mechanisms that allow controlling the visual representation of elements in a unified way for all user interface elements. The concept is similar to using CSS to control the look and feel of HTML.

Each Silverlight element has a series of attributes that you set to make a style for an element. By using styles you can simply change the style declaration and all controls in the application are updated automatically. This is a much faster alternative to updating each and every control in your application individually.

Style properties differ by element type. For example on a TextBlock (a text element) one can style the FontSize, FontFamily, Foreground and lots of other properties. On an Rectangle however none of these properties can be set; on the other hand it does provide for example the Fill property, which the TextBlock does not.

Style can be created as

1. Inline styles
2. Styles as Resources

Whether a style that is created as a resource or inline, it should contain the following:

1. TargetType 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.

2. A Setters collection with one or more Setter elements

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.

For example:

<Style TargetType="TextBox">
       <Setter Property="FontSize" Value="16"/>
       <Setter Property="FontFamily" Value="Comic Sans MS"/>
       <Setter Property="Foreground" Value="Blue"/>
</Style>

A style can optionally contain x:Key attribute.There are two ways to apply styles to your controls:

1. Implicitly, by only specifying a TargetType for the Style.
2. 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.

Inline styles

<Grid x:Name="LayoutRoot" Background="LightBlue" >
        <Grid.RowDefinitions >
            <RowDefinition MinHeight="10" />
            <RowDefinition MinHeight="10"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition MinWidth="10" />
            <ColumnDefinition MinWidth="10" />
        </Grid.ColumnDefinitions>
        <TextBox Grid.Column="0" Grid.Row="0" 
                 BorderBrush="Red" BorderThickness="3" 
                 TextWrapping="Wrap" FontWeight="Bold" 
                 FontSize="15" FontFamily="Arial Black" 
                 Text="This is Textbox">
        </TextBox>
        <Rectangle Grid.Column="1" Grid.Row="1" 
                   Fill="Green" Width="50" Height=" 50" >
        </Rectangle>
</Grid>

Here we a grid with two rows and two column. First Colum of first row of have a Textbox and second column of second row have a rectangle. Here we defined style inline of Textbox and Rectangle. If we need to have the same textbox at many places in the application then defining styles such in this way is not good. So it’s better to create one style that can be used by all the same type of elements.

Here is another way of defining style inline

<TextBox Text="This is Styled Textbox">
     <TextBox.Style>
            <Style TargetType="TextBox">
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="FontFamily" Value="Comic Sans MS"/>
                    <Setter Property="Foreground" Value="Blue"/>
            </Style>
     </TextBox.Style> 
</TextBox>
<Rectangle >
     <Rectangle.Style>
            <Style TargetType="Rectangle">
                    <Setter Property="Width" Value="30"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="Fill" Value="Yellow"/>
            </Style>
     </Rectangle.Style>
</Rectangle>

Styles as a resource

If you create your style as a resource then you can apply that style to as many of the same type of element in your application as you want.  There are a few places that you can declare a style for use. 

1. You can declare it at UserControl level where it is accessible to only the element on that UserControl. 
2. You can define it at application level and have the style available to the whole application. 
3. You can also define the style in a resource dictionary and have that accessible to the whole application

UserControl Level Resources

Resources that are for use only within a single Silverlight UserControl are defined in the XAML of the UserControl.  All resources defined at this level are defined between the Resources opening and closing tags which are declared directly under where the UserControl is defined and before any elements.

<UserControl x:Class="Styles.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources >
        <Style x:Key="StyledRectangle" TargetType="Rectangle">
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Fill" Value="Yellow"/>
        </Style>
        <Style x:Key="StyledTextbox" TargetType="TextBox">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot"  >

    </Grid>
</UserControl>

Apply the style to elements as following:

<TextBox Grid.Column="1" Grid.Row="0" Text="This is Styled Textbox" 
        Style="{StaticResource StyledTextbox}">
</TextBox>
<Rectangle Grid.Column="0" Grid.Row="1" 
	Style="{StaticResource StyledRectangle}" >
</Rectangle>

Application Level Resources

If you want your resources to be accessible application, instead of defining your resources in the XAML of the UserControl, you can place the style definition in the resources collection on the App.xaml file which you can find in the Solution Explorer of your project.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="Styles.App">
    <Application.Resources>
        <Style x:Key="AppStyledRectangle" TargetType="Rectangle">
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Fill" Value="Yellow"/>
        </Style>
        <Style x:Key="AppStyledTextbox" TargetType="TextBox">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Application.Resources>
</Application>

Apply this style to elements as following

<TextBox Grid.Column="1" Grid.Row="0" Text="This is Styled Textbox" 
		Style="{StaticResource AppStyledTextbox}">
</TextBox>
<Rectangle Grid.Column="0" Grid.Row="1" 
	Style="{StaticResource AppStyledRectangle}" >
</Rectangle>

Style in Resource Dictionary

Right click on the Silverlight project and Add New Item Select Silverlight Resource Dictionary. Name is a Styles.xaml

Add Styles as following:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Style x:Key="ResStyledRectangle" TargetType="Rectangle">
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Fill" Value="Yellow"/>
        </Style>
        <Style x:Key="ResStyledTextbox" TargetType="TextBox">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
</ResourceDictionary>

Now add this resource dictionary in the app.xaml as following

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="Styles.App">
    <Application.Resources>
        <ResourceDictionary >
            <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="Styles.xaml"/>
         		</ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Apply this style to elements as following

<TextBox Grid.Column="1" Grid.Row="0" Text="This is Styled Textbox" 
          Style="{StaticResource ResStyledTextbox}">
</TextBox>
<Rectangle Grid.Column="0" Grid.Row="1" 
	Style="{StaticResource ResStyledRectangle}" >
</Rectangle>

Referencing Styles Defined in XAML from Code Behind

Styles defined within the Resources section of XAML can be referenced by their x:Key values from the Resources array. So for example referencing the following style defined in XAML:

<UserControl.Resources >
    <Style x:Key="StyledRectangle" TargetType="Rectangle">
        <Setter Property="Width" Value="30"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Fill" Value="Yellow"/>
    </Style>
    <Style x:Key="StyledTextbox" TargetType="TextBox">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</UserControl.Resources>

Can be done the following way in the code behind:

Style customTextBlockStyle = Resources["StyledTextbox"] as Style;

Cascading Styles

Like in CSS you can now cascade styles in Silverlight too. You can append and/or override values by basing one style on another. In this way you can build a powerful and reusable set of styles to apply in your Silverlight applications.

<Style x:Key="AppStyledTextbox" TargetType="TextBox">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
</Style>
<Style x:Key="BlueStyledTextbox" TargetType="TextBox" 
BasedOn="{StaticResource AppStyledTextbox}">
        <Setter Property="Foreground" Value="Blue"/>
</Style>
<Style x:Key="LargerStyledTextbox" TargetType="TextBox" 
BasedOn="{StaticResource BlueStyledTextbox}">
        <Setter Property="FontSize" Value="25"/>
</Style>

You can apply the styles to elements as following

<TextBox Grid.Column="1" Grid.Row="0" Text="This is Styled Textbox" 
          Style="{StaticResource LargerStyledTextbox}">
</TextBox>

Silverlight natively only supports the nine core fonts (Arial, Arial Black, Comic Sans MS, Courier New, Gerogia, Lucida Grande/Lucida Sans Unicode, Times New Roman, Trebuchet MS and Verdana).  These fonts are guaranteed to render correctly on all browsers and operating systems that supports Silverlight.  If you want to use any other font you need to embed the font into your application. I will describe that in my next article…