Skip Navigation LinksHome / Tips / View Tip

Tip: Cascading Styles in Silverlight 3

+ Add to SilverlightShow Favorites
3 comments   /   posted by Emil Stoychev on Mar 23, 2009
(2 votes)
Categories: Styles and Templates

Like in CSS you can now cascade styles in Silverlight 3 too. You can append and/or override values by basing one style on another. In this way you can built a powerful and reusable set of styles to apply in your Silverlight applications.

Syntax

Style cascading is accomplished by using the new BasedOn attribute of the Style class.

   1: <Style x:Name="Headline" TargetType="TextBlock">
   2:     <Setter Property="FontFamily" Value="Verdana" />
   3:     <Setter Property="FontSize" Value="14" />
   4: </Style>
   5: <Style x:Name="ImportantHeadline" TargetType="TextBlock" 
   6:     BasedOn="{StaticResource Headline}">
   7:     <Setter Property="Foreground" Value="Red" />
   8: </Style>        
   9: <Style x:Name="HomePageHeadline" TargetType="TextBlock" 
  10:     BasedOn="{StaticResource Headline}">
  11:     <Setter Property="FontSize" Value="18" />
  12: </Style>

Here we have a base style Headline that targets TextBlock elements and defines values for FontFamily and FontSize. Next we have another style ImportantHeadline which again targets TextBlock elements. Note here the additional attribute BasedOn(Line 6). By using it we are basing this style on the style defined by its value – Headline in this example. Here we set the Foreground property of the TextBlock to be Red.

When we use the ImportantHeadline style on a TextBlock we are going to have both of the values set in the Headline style(FontFamily, FontSize) and those set in ImportantHeadline(Foreground).

Then another style HomePageHeadline is defined. It is also based on the Headline style, but this time it overrides the base value set for FontSize. Now when we use the HomePageHeadline on a TextBlock we can see that it appears  with FontFamily Verdana and FontSize 18.

The results are as follows:

Download Source Code

Note: you can cascade styles on more than one level. Following the example above you can base another style on the HomePageHeadline and you will have 3 levels of cascading.

Hope that helps!

Share


Comments

Comments RSS RSS
  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by Vince on Apr 30, 2009 08:17

    Nice artcile. Thankfully Silverlight is catching up with WPF!

    Do you know how to derive a framework control's Style like TabControl in a derived MyTabControl while defining the style for MyTabControl in a generic.xaml? It seems to work automatically in an app.xaml, but not in a generic.xaml.

  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by Alexey Zakharov on Jul 09, 2009 21:04
    Cool. I dreamed about it in SL2 =)
  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by Bts on Oct 12, 2009 09:11
    Thanks!

Add Comment

 
 

   
  
  
   
Please add 5 and 1 and type the answer here: