Alex Golesh's Blog About Silverlight Development

Silverlight 4 Quick Tip: Styling application

Silverlight 4 supports default styles. Default styles are styles with TargetType, but without x:Key property set. Those styles will be applied to all controls from corresponding type.

The sample of default (also sometime called anonymous) style:

<Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Background" Value="Red"/>
</Style>

This style will be applied on any button in the scope of the style. If this style will be placed in App.xaml it will be applied on all buttuns in application.

Now let’s style the application with different styles – I’ve created 2 sample Resource Dictionaries to be the “Themes” of my application with a number of styles for different controls. My sample “Theme 1”:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Background" Value="Red"/>
    </Style>
    <Style TargetType="TextBox">
        <Setter Property="FontSize" Value="20"/>
    </Style>
    <Style TargetType="TextBlock">
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</ResourceDictionary>

My sample “Theme 2”:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Height" Value="Auto"/>
        <Setter Property="Background" Value="Blue"/>
    </Style>
    <Style TargetType="TextBox">
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="Foreground" Value="Green"/>
        <Setter Property="Background" Value="Yellow"/>
    </Style>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</ResourceDictionary>

Now I’ll show how to apply those dictionaries to the application. Sample UI will be like follows:

<StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal">
            <Button Content="Theme 1" x:Name="btnTheme1" Click="btnTheme1_Click"/>
            <Button Content="Theme 2" x:Name="btnTheme2" Click="btnTheme2_Click"/>
            <Button Content="No Theme" x:Name="btnNoTheme" Click="btnNoTheme_Click"/>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Button Content="Test"/>
            <TextBlock Text="Some text here..."/>
            <TextBox Text="Some editable text here..."/>
        </StackPanel>
</StackPanel>

 

On corresponding button event I’ll apply the styles. Both resource dictionaries were added to the project as a Content resources. Let’s see the “Theme 1” button EventHandler:

ResourceDictionary rd = new ResourceDictionary();
//Load resourse dictonary
rd.Source = new Uri("/Theme1.xaml", UriKind.RelativeOrAbsolute);
//Clear previous styles if any...
App.Current.Resources.MergedDictionaries.Clear();
//Add the loaded resource dictionary to the application merged dictionaries
App.Current.Resources.MergedDictionaries.Add(rd);

The second theme is exactly the same. To “Clean” the themes from application just clear MergedDictionaries:

App.Current.Resources.MergedDictionaries.Clear();

Running application:

Application source here.

Stay tuned for more features how-to’s and tips

Alex