Skip Navigation LinksHome / Tips / View Tip

Tip: Cascading Styles in Silverlight 3

+ Add to SilverlightShow Favorites
6 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.


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!



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
  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by DWF on Apr 08, 2010 20:10
    This is not helpful. Why doesn't it show us where to put the style code on the page? IE Where does the style get declared and how is it assigned to a control.
  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by gaurav on May 11, 2010 12:07
    Thanks.....its very helpful
  • RE: Tip: Cascading Styles in Silverlight 3  

    posted by az on Jun 08, 2010 07:44
    is it possible to maintain a separate xaml file for all the styles?  and use them globally within the project?

Add Comment


Please add 8 and 3 and type the answer here:

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)