Tweaking The Default Styles For Silverlight 2 Controls

- tagged

In WPF, when styling a control, Blend has a very handy feature which allows you to get at the default style and template for any control, simply by right clicking the control and selecting "Edit Control Parts (Template)" and then selecting "Edit a Copy..."  These styles and control templates are great places to start when restyling controls.

Unfortunately, Silverlight 2 doesn't have the corrallary in Blend (yet).  However, this is easy to get around once you get a hold of the generic.xaml file for all the Silverlight controls. I went ahead and posted it, although there are two other places you can get an "official" copy. First is the source code for the Silverlight Controls themselves.  Second is by using Reflector, loading C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client\System.Windows.Controls.dll and looking at its resources in the disassembler.

Once you have generic.xaml, restyling controls by tweaking the existing styles is simple.  First, cut/paste the contents of generic.xaml (either all the styles or just the style of the control you want to restyle) into the resources of either app.xaml or one of your pages (depending on the scope you are seeking.) Second, give the style an x:Key value so that you can reference it later. Finally, add that style attribute to your control in XAML: Style="{StaticResource CustomButton}".  That's it!  Now you can tweak the style of the button, even changing the storyboards that get fired as a result of different states.

posted on Apr 1st, 2008 | Permalink | Comments (4)

4 Comments »

  1. http://blogs.msdn.com/delay/archive/2008/03/22/improved-access-to-silverlight-2-s-generic-xaml-resources-silverlightdefaultstylebrowser-available-via-clickonce.aspx">This</a> is useful too.

    Comment by Josh Santangelo - April 01, 2008 @ 4:43 PM
  2. >>Style="{StaticResource CustomButton}

    I don't want to define "Style" to control. It would be great if the style is able to overide the exiting based on the scope..

    For example:

    In generic.xaml, there is a style like below for DataGrid.

    <Style TargetType="local:DataGrid" x:Key="myDataGridStyle">

    I copied this style and pasted in App.xaml in my project.
    then, I change some color in that style..

    When I run the application, Datagrid is not using the style from App.xaml of my project but generic.xaml from original project. :(

    Yes. Of course, If I give x:Key and use it in Datagrid, it will work but this is not the way that I want.

    Comment by Michael Sync - April 03, 2008 @ 11:08 PM
  3. >>Style="{StaticResource CustomButton}

    I don't want to define "Style" to control. It would be great if the style is able to overide the exiting based on the scope..

    For example:

    In generic.xaml, there is a style like below for DataGrid.

    <Style TargetType="local:DataGrid" x:Key="myDataGridStyle">

    I copied this style and pasted in App.xaml in my project.
    then, I change some color in that style..

    When I run the application, Datagrid is not using the style from App.xaml of my project but generic.xaml from original project. :(

    Yes. Of course, If I give x:Key and use it in Datagrid, it will work but this is not the way that I want.

    Comment by Michael Sync - April 03, 2008 @ 11:08 PM
  4. Check out this post by Jaime on default styles: http://blogs.msdn.com/jaimer/archive/2008/04/08/built-in-styling-and-generic-xaml.aspx

    Comment by Karsten Januszewski - April 08, 2008 @ 6:25 PM

Leave a comment