This post is a summary on my 4 part series covering everything I think a developer needs to know about Styles in Silverlight in order to work with them in XAML or programatically. The overview of the series is as follows. All of the topics link to the original, more detailed article: feel free to explore the parts that interest you most!

Introduction

• What are Styles?
• Styles: List of Setters for a Given Type – Styles are collections of property setters to be applied to a visual element. It is mandatory to specify the TargetType for each Style.
  • TargetType
  • Setters
• Defining Styles in XAML – this can be done two ways: either within the Resources section or inline.
  • Defining Styles in the Resources Section – this is the recommended way. Styles defined here need to specify an x:Key attribute and can be reused within the document with StaticResources. Keys need to be unique within a resource section.
  • Defining Styles Inline – declaring styles inline does not have real advantages: it’s lengthy and the Style declared can’t be re-used from the XAML.
• Referencing Styles Defined in XAML from Code Behind – Styles defined in XAML (within the Resources section) can be referenced from code behind.
• Styling Controls Can’t Always Be Done With Styles: Templates and Themes – The visual look of controls can’t always be altered just by setting properties of the control via styles. A more powerful way of customizing control look and feel is via Control Templates and Themes.

Inheritance, Precedence and Other Advanced Topics

• Re-Using Styles for Different Types: the TargetType of the Style can be a parent type of the target object as long as it only sets properties of the parent type.
• Style Inheritance: The BasedOn property – inheriting styles can be done using the BasedOn property. Styles support single inheritance and the depth of inheritance is not limited.
• Implicit Styling – in Silverlight 4 the default styles of elements on a page / control can be specified in a simple way using implicit styles.
• Style Precedence: a Style’s Setters only get applied if the object’s particular property is not animated, not set locally and not set in the control template belonging to the object.
• Style Setter Precedence: setters specifying the value of the same property may be declared within the same Style. The last one of them has the highest precedence and will be used.

Further Advanced Topics

• Style is a Dependency Property. This means that it supports the following features:
  • Data binding: it’s possible to bind styles on to another – even though this is probably a very rare real world scenario.
  • Property changed notifications: it’s not possible to directly subscribe to property changed notifications for the Style property due to the feature missing in Silverlight, however there is a complicated, but working workaround available to detect when the Style is being changed.
  • ClearValue: unsetting the value of a Style is not the same as setting it to null. When wanting to reset or clear the style, ClearValue is the method to be used.
• Declaring Styles In Code Behind is possible, it results in more complex code though then doing the same thing in XAML.
• Other Notes About Styles
  • Only Dependency Properties Can Be Styled: styling CLR properties will result in either a compile time or runtime error.
  • Not All Classes Have Styles: only Ones Derived From FrameworkElement have the Style property and thus can be styled. All of the built-in visual controls, the Control and UserControl class are descendants of this class. It’s worth remembering this when creating custom classes that might need to be styled.

Manipulating Styles at Runtime

• Modifying Styles at Runtime: the IsSealed Property – Modifying the Setters of a Style can only be done if the IsSealed property is set to false. This property is false when the Style is created and is set to true once the Style is applied to any element in the visual tree.
• Cloning Styles – since styles can’t be modified once the IsSealed property is set to true, the most convenient way to modify an existing style is to clone it, than modify the cloned style.
• Merging Styles Runtime – a more advanced scenario from simply modifying a few setters in a Style is merging two Styles into one.
  • Using the BasedOn Property – an easy way of implementing merging of styles is to use the BasedOn property when creating the merged style.
  • Copying Setters of the Styles – another, slightly more complicated approach is to create a Style by manually copying over the Setters from the ChildStyle and then copy the non conflicting Setters from the ParentStyle.
  • An Example of Both Approaches
• Some Bugs when Manipulating Styles at Runtime – there are some smaller bugs I’ve come across when manipulating Styles runtime in Silverlight. These include StrokeDashArray problems and disappearing style setters in Silverlight 3 and WP7.

I hope this summary on styles in Silverlight was helpful.

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.
(more…)