Silverlight 2 Control Skins

Silverlight 2 Control Skins

Rate This
  • Comments 36

Last week, Silverlight 2 beta one was the hot topic at the Mix 08 conference that took place in Las Vegas, and rightly so, as it now has even more great functionality to offer, and you can find out about specific details on Silverlight.net or on Scott Guthrie's blog. Scott's blog also contains several very informative walkthroughs detailing how to use much of the new functionality, and I highly recommend checking it out.

One of the new aspects of Silverlight 2 that I'm most psyched about right now is the new set of controls that it has to offer; which includes...

  • Button
  • Toggle Button
  • Radio Button
  • Checkbox
  • Texbox
  • Tooltip
  • Hyperlink
  • Slider
  • ScrollViewer
  • Calendar
  • Datepicker
  • DataGrid
  • ListBox
  • etc…

The default controls look great as is, but I need variety, so a designer friend of mine and I decided to put together a few new sets of styles for the controls listed above. We now have three different sets that are ready for you to check out and two more that will be ready for consumption within the next two weeks. Here’s what we have now, and you can view the styled controls in action or download them to add to your project (Page.xaml contains my sample page layout and App.xaml contains the style definitions)….

The download for the Flat set of styles also contains a Page.xaml.cs, and a Page.xaml.vb file. The reason these files are there is because I'm auto generating my columns in my data grid and the only way I can control the styles for the column content is through code (I'm changing fontfamily and fontsize). If I weren't autogenerating the columns I could control the style for the column content in the way I have for every other control (in the case of datagrid, I would use ElementStyle and EditingElementStyle).

 

The following set of steps describe some of the ways that you can apply these styles to your project.

 

Apply Styles Globally

To use the styles globally in your project, open your App.xaml file and replace your <Application.Resources>...</Application.Resources> with my <Application.Resources>...</Application.Resources> for the set of styles that you are interested in using.

Then, you can utilize the styles for controls throughout your project by adding a reference to the style of interest. For example, for button you would add the bold text below to the button tag,

<Button Content="hi" Style="{StaticResource buttonStyle}"/>

 

Apply Styles to a Particular XAML Page

To use the styles in a particular XAML page, open the page and add the following below the opening UserControl tag, <UserControl.Resources></UserControl.Resources>, and then copy and paste my styles from App.xaml into the tag (minus <Application.Resources></Application.Resources>)

Then, you can utilize the styles for controls throughout the XAML page by adding a reference to the style of interest. For example, for button you would do exactly as described in the previous example, and add the bolded text below to the button tag,

<Button Content="hi" Style="{StaticResource buttonStyle}"/>

 

Apply a Style to a Particular Control Inline

To use a style for a particular control inline, place the style directly in the control of interest. For example, for button you would add the following to your button tag (you also need to remove the x:Key attribute from the style tag as shown in the comment below)

<Button Content="hi">

<Button.Style>

<!-- Button -->

<!-- ORIGINAL STYLE TAG NEEDS X:KEY REMOVED AS SHOWN BELOW, HERE'S THE ORIGINAL TAG ----> <Style x:Key="buttonStyle" TargetType="Button">-->

<Style TargetType="Button">

<REST OF STYLE HERE BUT I'M NOT SHOWING IT :)-->

</Style>

</Button.Style>

</Button>

Please ping me with questions if anything is unclear.

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • Hello,

    I replaced page.xaml and App.xaml. I am getting following error when I compile.

    Error 1 The type or namespace name 'DataGrid' does not exist in the namespace 'System.Windows.Controls' (are you missing an assembly reference?) c:\silverlightprojects\styles_red\styles_red\obj\debug\page.g.cs 36 42 Styles_Red

    Please help. Could you send me your complete Visual Studio project?

    thanks.

  • Hi Kamipatel,

    I just created a new post on how to hook up data to ListBox and DataGrid that I think will help resolve this problem. Check it out here, http://blogs.msdn.com/corrinab/archive/2008/03/17/hooking-data-up-to-listbox-and-datagrid.aspx. The problem is that for DataGrid, you need to add a reference to System.Windows.Controls.Data in your project as well as the namespace for this in your Page.xaml file. I talk specifically about how to do this towards the bottom of the new post. I think this should help :)

    - Corrina

  • Hello Corrina,

    I did try to follow http://blogs.msdn.com/corrinab/archive/2008/03/17/hooking-data-up-to-listbox-and-datagrid.aspx but still can not get it to compile. I do not see <dSrc:CustomerList /> defined anywhere.

    Do you mind sending the look and feel solution to my email kam_patel@hotmail.com

    Thanks,Kam

  •   CorrinaB said:

    Hi Kam,

    Remove the dSrc:CustomerList part. This is another way to reference data and you don't need it if you followed the last walkthrough I posted. If you did the data walkthrough, I would recommend using the solution you created there and then paste in the styles you're interested in into App.xaml, and then create new control instances for the other controls in Page.xaml.

    I'm not comfortable sending you one of my complete projects at this time because I need to clean it up and I'm in Asia on vacation for the next three weeks and won't have much time to do this. Can you try my recommendation here and if that doesn't work I'll send you a project when I'm back in town. I'm sorry I can't be of more immediate help :(

    Also, I just was sent a pointer to one of our data experts blog and he just did a post on using datagrid that may also be interesting to check out :) http://blogs.msdn.com/scmorris/archive/2008/03/21/using-the-silverlight-datagrid.aspx

    - Corrina

  • Via ce billet de Kathy Kam , on apprend que Corrina Barber - qui est le designer en charge de cr&#233;er

  • If anyone still needed to see the Power of Skinning for Silverlight controls, well, Corrina just did

  • Corrina Barber has publish four different Silverlight control skin sets that looks very nice and shows

  • Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, Pete

  • Is it possible to skin Silverlight controls to look as slick as Flex's default?

    I was very impressed with the samples which leads me to believe that it can be done, but the effort seems considerable.

    Flex samples: http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

    Obviously Silverlight isn't as mature as Flex and Adobe's designers are probably pretty good, MS tends to leave the details to the developer/designer whereas adobe has beautiful defaults that don't seem to need any tweaking.

    All I'm saying is that I'd pay money for these skins :) ... is there anyone out there with the talent?

  • Incontestablement, les contr&#244;les graphiques sont une des nouveaut&#233;s de Silverlight 2 qui &#233;taient

  • ...or what I have experienced in the last days with my personal Virtual Machine. And finally few pieces

  • Here's one for you... why not keep things simple and just make a zip file with an entire working solution!

  • I have been having some fun with an end to end Silverlight 2 demo recently and I thought I'd share it

  • Last weekend, I decided to take time off from what I was supposed to be doing (shh... don&#39;t tell

  • I'm working with the very talented Corrina Barber who has created several sets of skins for Silverlight controls. The skins are elegant, but not over the top, styles that can be applied to Silverlight controls. Corrina has been gracious enough to help

Page 2 of 3 (36 items) 123