What’s New In SL3 – Based-on Styles : Silverlight Feeds

What’s New In SL3 – Based-on Styles

by jesseliberty via Jesse Liberty - Silverlight Geek on 7/18/2009 5:21:00 PM

In Silverlight 3 it is now possible to build a new style based on an existing style, thus reducing duplication of code and creating easier to manage resources (see also Merged Resource Dictionaries).

Thus you could create a style for your buttons that looks like this:

   1: <Style x:Key="StandardButton"

   2:         TargetType="Button">

   3:    <Setter Property="Width"

   4:            Value="100" />

   5:    <Setter Property="Height"

   6:            Value="35" />

   7:    <Setter Property="HorizontalAlignment"

   8:            Value="Left" />

   9:    <Setter Property="VerticalAlignment"

  10:            Value="Bottom" />

  11:  </Style>

You may then create any number of buttons in Xaml using that style,

   1: <Button x:Name="Button1"

   2:         Content="Standard"

   3:         Grid.Row="0"

   4:         Grid.Column="1"

   5:         Style="{StaticResource StandardButton}" />

The new capability of creating a style BASED ON the first allows you to add just those characteristics that you would change, here are two such modifications, the second building on the first,

   1: <!-- Big Button -->

   2: <Style x:Key="BigButton"

   3:       BasedOn="{StaticResource StandardButton}"

   4:       TargetType="Button">

   5:    <Setter Property="Width"

   6:          Value="150" />

   7:    <Setter Property="Height"

   8:          Value="50" />

   9: </Style>

10:

  11: <!--BigFont Button-->

  12: <Style x:Key="BigFontButton"

  13:     TargetType="Button"

  14:     BasedOn="{StaticResource BigButton}">

  15:    <Setter Property="FontFamily"

  16:        Value="Georgia" />

  17:    <Setter Property="FontSize"

  18:        Value="24" />

  19: </Style>

In this case, the first style, BigButton, adds a new width and height to the standard button, and the second style, BigFontButton, is based on BigButton and adds just a change in font family and font size. You use the third style just as you would the first, without any need to reference the “ancestor” styles,

   1: <Button x:Name="Button3"

   2:         Content="Big Font"

   3:         Grid.Row="2"

   4:         Grid.Column="1"

   5:         Style="{StaticResource BigFontButton}" />

The result is two buttons, one utilizing the original style, the other the twice modified style,

Previous: Perspective 3d Transform Next: Data Validation

Please note that I’m transitioning What’s New In Silverlight 3 from a stand alone wikiDocument to a set of interconnected blog posts to make it more available throughout our various web sites.