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 is a Senior Consultant with Wintellect, with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight & LinkedIn Learning courses, and has been 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.

Leave a Reply

Your email address will not be published. Required fields are marked *