(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Implicit Styles in Silverlight

(10 votes)
Pencho Popadiyn
>
Pencho Popadiyn
Joined Apr 30, 2008
Articles:   22
Comments:   97
More Articles
16 comments   /   posted on Nov 24, 2009
Categories:   General , Controls , Design

This article is compatible with the latest version of Silverlight.


Introduction

Only three months after the release of the latest official version of Silverlight 3, a new beta version – Silverlight 4 is already a fact. There are a lot of new things, which deserve to be mentioned, such as Rich Text, drop target, webcam, microphone, etc. Check out the official Silverlight site for more information. However, in this article I decided to show you one very interesting feature, which is taken from WPF, namely it is the implicit styles feature.
What was the situation till now? Whenever you’ve created a style  in Silverlight, you were obligated to specify the TargetType as well as an unique Key/Name for the style. You should also explicitly set the Style property of the desired element.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Height" Value="55"/>
    <Setter Property="Width" Value="140"/>
    <Setter Property="Margin" Value="8"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="-15"/>
        </Setter.Value>
    </Setter>
</Style>
.................
<StackPanel>
    <Button x:Name="button1" Content="First Button" Style="{StaticResource ButtonStyle}"/>
    <Button x:Name="button2" Content="Second Button" Style="{StaticResource ButtonStyle}"/>
</StackPanel>

This is also known as a named style.

 

But not any more! Silverlight 4 gives you the ability to create implicit styles.

Creating Implicit Styles

If you omit the Style’s Key and specify only the TargetType, then the Style is automatically applied to all elements of that target type within the same scope (it is implicitly applied). This is typically called a typed style as opposed to a named style, which is the only kind of Style we’ve seen so far.

The following example demonstrates you how to create an implicit style, which will be applied to all Buttons in the Application scope.

<Style TargetType="Button">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Height" Value="55"/>
    <Setter Property="Width" Value="140"/>
    <Setter Property="Margin" Value="8"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="-15"/>
        </Setter.Value>
    </Setter>
</Style>
.............
<StackPanel>
    <Button x:Name="button1" Content="First Button"/>
    <Button x:Name="button2" Content="Second Button"/>
</StackPanel>

 Note, you shouldn't specify the Button's Style property.

 

In such an application, all Buttons get this style by default. But each Button can still override its appearance by explicitly setting a different Style or explicitly setting properties.

<Button x:Name="button2" Content="Second Button" Background="Green"/>

 

Also, any Button can restore its default Style by setting its Style property to null.

<Button x:Name="button2" Content="Second Button" Style="{x:Null}"/>


The Target Element Must Match Exactly the TargetType

Note, that the TargetType must match exactly for a typed style to be applied. For example, if you specify the Style’s Key, then it’s ok for the target element to be a subclass of the TargetType. But a typed style typically gets applied to elements which type matches exactly! This is done to prevent surprises. For example, you might have created a Style for all ToggleButtons in your application and you don’t want this style to be applied to any CheckBoxes (which derives from the ToggleButton).

Where is the Key for the Keyless Resource?

So far so good, but you may wonder how it is possible a Style to get away with being a member of a ResourceDictionary without having a key. It actually does have a key – it’s just set implicitly. And the implicit key is simply the value of the TargetType (at least this is the situation in WPF, probably it is also true for Silverlight!?!).

Implicit Styles and BasedOn

If you have multiple implicit styles relating to a particular control, then they do not magically combine. For example, if you have the following two styles:

<Style TargetType="Button">
    <Setter Property="FontSize" Value="16"/>
</Style>
 
<Style TargetType="Button">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="Black"/>
</Style>

they won’t get combined. Something more - this will result in a run-time error. However, implicit styles can still use BasedOn. After the refactoring of the previous example it should look like the code below:

<Style x:Key="BasedStyle" TargetType="Button">
    <Setter Property="FontSize" Value="16"/>
</Style>
 
<Style TargetType="Button" BasedOn="{StaticResource BasedStyle}">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="Black"/>
</Style>

Undoubtedly, this is a great addition to the Silverlight styling. You can define implicit styles at any level of your application. Additionally you have the ability to override at any time the implicit style or even to reset it.


Subscribe

Comments

  • -_-

    RE: Implicit Styles in Silverlight 4


    posted by Theo# on Jan 14, 2010 14:51
    Hi, is this supposed to work with merged resource dictionaries as well? I mean define a resource dictionary, include a merged dictionary and add a style based on a style of the merged dictionary. I can't make it work...
  • ppopadiyn

    RE: Implicit Styles in Silverlight 4


    posted by ppopadiyn on Jan 22, 2010 10:52

    Hi Theo#

    I tried to use merged dictionaries and implicit styles, however without success. Obviously in this beta version of SL4, it doesn't work.

  • -_-

    RE: Implicit Styles in Silverlight 4


    posted by LostInSpace on Sep 28, 2010 22:48
    How does one get text to wrap in a button control?
  • -_-

    RE: Implicit Styles in Silverlight 4


    posted by GOPINATH on Jan 07, 2011 07:34

    Hi ,

    Explained Nicely

  • -_-

    RE: Implicit Styles in Silverlight


    posted by Kanthesha Murthy on Mar 17, 2011 14:54

    Hi All

     I am new to silverlightshow.net. I have a doubt I think I will get answer here

    My doubt is can we assign same width to many different controls using only one style? ie. can we use more than one

    TargetType values (TargetType="Button, TextBlock, ...") like this. so that If I change Width in one style it will affect all the controls Which I have listed in TargetType.

    Thanks in Advance.

     

  • ppopadiyn

    RE: Implicit Styles in Silverlight


    posted by ppopadiyn on Mar 17, 2011 15:03

    Hi Kanthesha Murthy,

    Unfortunately, you cannot specify more than one target type at once. However, what you can do is to set a base class for the TargetType. Thus, all controls that derives from that class will be affected. For example, the Button control derives from ButtonBase, and so does the RadioButton. So if you set: TargetType = "ButtonBase", that style will be applied to all controls that inherits ButtonBase. I hope you catched the idea. :)

    Regards

  • -_-

    RE: Implicit Styles in Silverlight


    posted by Kanthesha Murthy on Mar 18, 2011 06:51

    Thank Mr. Ppopadiyn,

    Can we do it in C# code?

  • ppopadiyn

    RE: Implicit Styles in Silverlight


    posted by ppopadiyn on Mar 19, 2011 20:13
    Well, probably you can do that via procedural code. However i've never tried declaring styles in the code-behind. I prefer declaring styles in XAML.
  • -_-

    RE: Implicit Styles in Silverlight


    posted by Kanthesha Murthy on Mar 21, 2011 11:40
    OK.

    Thank Mr. Ppopadiyn,

  • -_-

    RE: Implicit Styles in Silverlight


    posted by Kevin on Mar 29, 2011 09:59
    What if based and derived both style having same property value?
  • ppopadiyn

    RE: Implicit Styles in Silverlight


    posted by ppopadiyn on Mar 29, 2011 20:33

    Hi Kevin

    If you set the same property in the base and in the derived style, the value from the derived style will be applied.

  • cabronek

    Re: Implicit Styles in Silverlight


    posted by cabronek on Jun 27, 2011 17:30

    Hi,

    A default style with TargetType="ButtonBase" won't apply to a Button or any other control inheriting from ButtonBase, because, as far as I know, implicit styles are applied only to the exact type specified in the TargetType property. So if you want to have a common style for all types of buttons (Button, RadioButton, CheckBox), I'd suggest creating a style for ButtonBase with a key/name and with all required setters and then creating empty (without setters) implicit styles for every type of button with BasedOn set to the style for ButtonBase.

  • ppopadiyn

    Re: Implicit Styles in Silverlight


    posted by ppopadiyn on Jun 28, 2011 10:58

    Hi, cabronek,

    You are totally right, a default stype with TargetType = "ButtonBase" won't apply to a Button control. It is my fault. Thanks for clarifing that inaccuracy.

  • weitzhandler

    Re: Implicit Styles in Silverlight


    posted by weitzhandler on Feb 24, 2012 01:09

    In WPF you can inherit from implicit styles using BasedOn="{StaticResource {x:Type Button}}", will this work in Silverlight (I did implement a TypeExtension using the new markupextension.

  • GeorgeBirbilis

    Re: Implicit Styles in Silverlight


    posted by GeorgeBirbilis on Jun 12, 2013 17:50
    In custom controls one may use code like:
    public FlipPanel() {  
         DefaultStyleKey = typeof(FlipPanel);  
    } 
     
    so this is where it gets the implicit keyname to use. I guess you could provide other keys there and force the control to use a named style as if it was an implicit style
  • GeorgeBirbilis

    Re: Implicit Styles in Silverlight


    posted by GeorgeBirbilis on Jun 12, 2013 18:29

    After some experimentation, this worked for me:

    public ImageFlip()  {

      System.Windows.Application.LoadComponent(
         this.Resources,
         new System.Uri("/FlipPanel;component/Themes/RotateVerticalTheme.xaml",
         System.UriKind.Relative));

      Style = (Style)Resources["FlipPanel_RotateVerticalStyle"];
    }

     

    used this to override DefaultStyleKey = typeof(FlipPanel) that was done at ancestor's constructor (that one was applying some other style implicitly)

Add Comment

Login to comment:
  *      *