Gergely on Silverlight

Styles in Silverlight – Inheritance, Precedence and Other Advanced Topics

July 29th, 2010

This article is part 2 of 4 in a series attempting to cover everything I think is worth knowing about styles in Silverlight 4. The previous article in the series was Styles in Silverlight: an Introduction that covered what styles are, how they can be defined and some of their limitations.

This article focuses on some more advanced topics that are handy when building more complex applications: re-using the same styles for different types, style inheritance, style precedence and style setter precedence.

Re-Using Styles for Different Types

As discussed in the previous article, all Style elements need to specify a TargetType that specifies the type of class they need to be applied to. If an application uses several different types of visual elements, this can result in having to specify different styles again and again. Let’s say for example our application has an Ellipse and a Rectangle and we want to have both of them have a blue fill. The straightforward way of doing this using Styles is declaring two different styles for each of them and applying those using StaticResources in XAML:

<usercontrol .Resources>
    <style TargetType="Ellipse" x:Key="CustomEllipseStyle">
        <setter Property="Fill" Value="Blue"/>
    </style>
    <style TargetType="Rectangle" x:Key="CustomRectangleStyle">
        <setter Property="Fill" Value="Blue"/>
    </style>
</usercontrol>
<stackpanel Orientation="Vertical">
    <ellipse Width="30" Height="30" Style="{StaticResource CustomEllipseStyle}"/>
    <rectangle Width="30" Height="30" Style="{StaticResource CustomRectangleStyle}" Margin="0,10,0,0"/>
</stackpanel>

However in this particular case it’s possible to combine these styles as Ellipse and Rectangle inherit from the same parent class: Shape. The Fill property that we are setting in the styles is defined in Shape, so we can define a single style with the TargetType set to Shape, then apply this Style to the elements:

<usercontrol .Resources>
    <style TargetType="Shape" x:Key="CustomShapeStyle">
        <setter Property="Fill" Value="Blue"/>
    </style>
</usercontrol>
<stackpanel Orientation="Vertical">
    <ellipse Width="30" Height="30" Style="{StaticResource CustomShapeStyle}"/>
    <rectangle Width="30" Height="30" Style="{StaticResource CustomShapeStyle}" Margin="0,10,0,0"/>
</stackpanel>

So the TargetType of the style does not necessarily have to be the type of the visual element itself. It can be a parent class of the visual element if the setters within this style only refer to properties of this parent class. The XAML code for the second example is shorter, at the same time both examples look the same:

Read the rest of this entry »

Tags: , ,
Posted in Silverlight | 7 Comments »

Styles in Silverlight: an Introduction

July 23rd, 2010

This article is part 1 of (planned) 4 in a series attempting to cover everything I think is worth knowing about styles in Silverlight 4.

What are Styles?

Styles in Silverlight are a powerful mechanism 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.

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 Ellipse however none of these properties can be set, on the other hand it does provide for example the Fill property, that the TextBlock does not. So creating a blue “Hello, World” text and a red ellipse could be done the following way:

<stackpanel Orientation="Vertical">
     <textblock FontSize="16" FontFamily="Comic Sans MS" Foreground="Blue">Hello, World!</textblock>
     <ellipse Fill="Red" Width="30" Height="30"/>
</stackpanel>

However, to do the same thing, we could simply define Styles. Styles are list of property-value pairs. Creating the same blue text and red ellipse with styles would be done the following way:

<usercontrol .Resources>
    <style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <setter Property="FontSize" Value="16"/>
        <setter Property="FontFamily" Value="Comic Sans MS"/>
        <setter Property="Foreground" Value="Blue"/>
    </style>
    <style x:Key="CustomEllipseStyle" TargetType="Ellipse">
        <setter Property="Width" Value="30"/>
        <setter Property="Height" Value="30"/>
        <setter Property="Fill" Value="Red"/>
    </style>
</usercontrol>
<stackpanel Orientation="Vertical">
    <textblock Style="{StaticResource CustomTextBlockStyle}">Hello, World!</textblock>
    <ellipse Style="{StaticResource CustomEllipseStyle}"/>
</stackpanel>

As you can see properties that we’ve specified as attributes on the elements, we’ve listed in the styles and then applied this style to the element. So instead of defining FontSize=”16″ of the TextBlock, we’ve added a Setter that had FontSize set as it’s Property and 16 as it’s Value. (Download the source of this example here: What Are Styles.zip)

Having seen a simple example of using styles, let’s look a little bit deeper in to what they actually are.
Read the rest of this entry »

Tags: ,
Posted in Silverlight | 7 Comments »