Skip Navigation LinksHome / Tips / Styles and Templates

Styles and Templates

Items Resolution

  • 6 comments  /  posted by  Emil Stoychev  on  Mar 23, 2009 (more than a year ago)

    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.


  • Tip: What is the difference between styling and skinning

    0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)
    Styling control means to apply to the control's properties predefined in the style values. Styling deals mainly with properties like Foreground, BackgroundFontStyle and FontSize, etc.
    Skinning, on the other hand, allows you to build your own presentation for that control by defining control template. Thus, you are able to completely replace the standard presentation with another, which includes more visual elements, animations and other effects.
    That's it!
  • 0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)

    Skinning is a way to completely replace the look of your control. In order to do that, you have to define new template and set it to the Control.Template property.

    Building your own template allows you to make the control look and feel in the way you like. You might add new elements or remove the existing, you can also edit the visual states and transitions.

    In the example the button shape is changed. All animations are removed for simplicity.

       1: <UserControl.Resources>
       2:     <Style x:Key="myButtonTemplate" TargetType="Button">
       3:         <Setter Property="Template">
       4:             <Setter.Value>
       5:                 <ControlTemplate TargetType="Button">
       6:                     <Grid>
       7:                         <Path Margin="2"  x:Name="BackgroundGradient" Stretch="Fill" Stroke="#FF94C2D8" 
       8:                               StrokeThickness="2" Opacity="1"
       9:                               Data="M44,-135 L137,-136 L163.00137,-114.43846 L138.14738,-98.33696 L40.513062,-96.888382 L65.010727,-116.44418 z" >
      11:                             <Path.Fill>
      12:                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      13:                                     <GradientStop Color="#FFA3AEB9" Offset="0"/>
      14:                                     <GradientStop Color="#FF8399A9" Offset="0.375"/>
      15:                                     <GradientStop Color="#FF718597" Offset="0.375"/>
      16:                                     <GradientStop Color="#FF617584" Offset="1"/>
      17:                                 </LinearGradientBrush>
      18:                             </Path.Fill>
      19:                         </Path>
      20:                         <ContentPresenter
      21:                             x:Name="contentPresenter"
      22:                             Content="{TemplateBinding Content}"
      23:                             ContentTemplate="{TemplateBinding ContentTemplate}"
      24:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      25:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      26:                             Margin="{TemplateBinding Padding}"/>
      27:                     </Grid>
      28:                 </ControlTemplate>
      29:             </Setter.Value>
      30:         </Setter>
      31:     </Style>
      32: </UserControl.Resources>

    That's it!

  • 1 comments  /  posted by  Ivan Dragoev  on  Nov 13, 2008 (more than a year ago)

    Styling control is a very easy way to tweak the minor visual characteristic of the control such as foreground and background colors, the font style and size, padding, etc. Usually the styles are stored as resources which allows you to reuse them whenever you want.

    The Style has TargetType specifying the type of the object the style can be applied to and a key used to identify the style. The Style contains numerous Setters, which describe the values which you want to set to specific properties.

    To apply style to a control simply specify the Style property of the control to point to the static resource with a specific key name.

  • 3 comments  /  posted by  Denislav Savkov  on  Sep 18, 2008 (more than a year ago)

    Silverlight doesn't support mouse wheel event. There is a way to catch them if we ask to the browser for them. This workaround works well if the page with your Silverlight application fits in the browser. If the page is bigger in height a scroll appears. Then the whole content of the page is scrolled and the SL application doesn't receive the wheel event until one end is reached.

    Hook up to the event. Different names are used in the different browsers.


    using System.Windows.Browser;
  • 1 comments  /  posted by  Denislav Savkov  on  Sep 18, 2008 (more than a year ago)

    These are the differences:

    • Is it possible to apply a style to all elements in your application?

    Unforunately, the Beta 2 does not support implicit styles using the TargetType attribute like WPF. To apply a style to all elements you must explicitly set a value to each Style property.

    • Is it possible to extend a style?

    In Silverlight styles cannot be based on other styles. In WPF that is possible using the BasedOn attribute

    • Is it possible to change the style of a control more than once?


  • 0 comments  /  posted by  Denislav Savkov  on  Sep 18, 2008 (more than a year ago)

    Changing the default style or template of a control from the standard library is the same as with any other control. Except to create your own style it is good to know the parts and the states that compose the standard style. Microsoft has released the full XAML of a number of controls along with description of their visual states and state groups - Control Styles and Templates. Additionally using the reflector you can extract the styles of some slightly different controls, we did that and uploaded the generic.xaml file for you.


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)