A quick look at Silverlight 3: Derived Styles

Posted on by

One of the WPF features that come through in Silverlight 3 is the ability to derive a style from another style.

So, I can come up with one style which sets up large fonts from a particular font family such as;

<Style
       TargetType="Control"
       x:Key="baseStyle">
       <Setter
           Property="FontSize"
           Value="24" />
       <Setter
           Property="FontFamily"
           Value="Arial" />
   </Style>

and then go ahead and derive two styles which pick up that FontFamily and FontSize but then add Foreground in order that I can style some buttons;

<Style
       x:Key="redText"
       TargetType="Control"
       BasedOn="{StaticResource baseStyle}">
       <Setter
           Property="Foreground"
           Value="Red" />
   </Style>
   <Style
       x:Key="blueText"
       TargetType="Control"
       BasedOn="{StaticResource baseStyle}">
       <Setter
           Property="Foreground"
           Value="Blue" />
   </Style>

and then combine that together;

<UserControl x:Class="SilverlightApplication11.MainPage"
    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
            TargetType="Control"
            x:Key="baseStyle">
            <Setter
                Property="FontSize"
                Value="24" />
            <Setter
                Property="FontFamily"
                Value="Arial" />
        </Style>
        <Style
            x:Key="redText"
            TargetType="Control"
            BasedOn="{StaticResource baseStyle}">
            <Setter
                Property="Foreground"
                Value="Red" />
        </Style>
        <Style
            x:Key="blueText"
            TargetType="Control"
            BasedOn="{StaticResource baseStyle}">
            <Setter
                Property="Foreground"
                Value="Blue" />
        </Style>
    </UserControl.Resources>
    <StackPanel
        x:Name="LayoutRoot"
        HorizontalAlignment="Center"
        Background="White"
        Orientation="Horizontal">
        <Button
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Style="{StaticResource redText}"
            Content="Text" />
        <Button
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Style="{StaticResource blueText}"
            Content="Text" />
    </StackPanel>
</UserControl>

to give the expected result;

image

I can also have dynamic styles in the sense that I can do something like;

<UserControl x:Class="SilverlightApplication11.MainPage"
    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
            TargetType="Control"
            x:Key="baseStyle">
            <Setter
                Property="FontSize"
                Value="24" />
            <Setter
                Property="FontFamily"
                Value="Arial" />
        </Style>
    </UserControl.Resources>
    <StackPanel
        x:Name="LayoutRoot"
        Background="White"
        Orientation="Vertical">
        <ListBox x:Name="lstStyles" Margin="20">
            <Style
                TargetType="Control"
                BasedOn="{StaticResource baseStyle}">
                <Setter
                    Property="Foreground"
                    Value="Red" />
            </Style>
            <Style
                TargetType="Control"
                BasedOn="{StaticResource baseStyle}">
                <Setter
                    Property="Foreground"
                    Value="Blue" />
            </Style>
        </ListBox>
        <Button
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Style="{Binding ElementName=lstStyles,Path=SelectedItem}"
            Content="Text" />
    </StackPanel>
</UserControl>

and have a UI ( in this case just a simple Button ) that binds its Style to a dynamic selection from a ListBox.

You can download the code for this post from here.

This is one of a series of posts taking a quick look at Silverlight 3 – expect them to be a little “rough and ready” and that they’ll get expanded on as I’ve had more time to work with Silverlight 3.