What’s New In SL3 – Based-on Styles

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>


  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,

based-on styles.TwoButtons

PreviousPerspective 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.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.