Great new Silverlight Control Skins


One of the great things about Silverlight is that the controls are very skinable.. that is you can make them look just the way you want to! 

Corrina is the lead designer on the Silverlight controls… she has already gotten board with the (very cool) default skin we shipped at Mix08, so she cooked up a few others to keep things interesting.

All the source is posted so you can easily include them in your own projects to make your Silverlight apps look cooler, or tweak and make your own skins!  It is very easy to open them up on Expression Blend and tweak them to look just they way you want!  I’d love to see what you can come up with.

Also, check out Karen Corby’s Creating Rich, Dynamic User Interfaces with Silverlight 2 session from mix for more details

I gotta say, Red is my personal favorite..   how about you?

Bubbly

View Live Download

image

Red

View Live Download

image

Flat

View Live Download

image

 

Hand Written

View Live Download

image

 

Update (3-24): Added One more, Hand Written

Comments (28)

  1. Jesse Liberty on where to get started in SL2, Brad Abrams exposes new SL2 control skins, Ralf Rottmann

  2. Currently we are using Adobe flex to develop RIA. I’m a .NET developer and with Silverlight 2.0 hope we will be able to replace flex (if all features exists)

  3. One of the great things about Silverlight is th

  4. kiseok says:

    im happy cause i am silverlight developer 🙂

  5. You’ve been kicked (a good thing) – Trackback from DotNetKicks.com

  6. Paolo says:

    Sei forte!

    La List box scorre lentamente ma è esteticamente splendida.

    Continua cosi!

    Ciao

    Paolo

  7. Sam Gentile says:

      Comments and trackbacks are back on after a futile battle with spam. I'll see how long it

  8. Kellen says:

    The list box edge seems to be cut off on the right side, and there doesn’t seem to be clear focus denotation on some of the controls (dropdown for example).  The bubbly doesn’t seem to show focus at all but I think that’s due to being on a white background.

  9. Mavi says:

    Thanks for sharing, it’s great !!!

    "If I have seen further it is by standing on the shoulders of giants." – Sir Isaac Newton

  10. Shankar says:

    Why am I not able to use my mouse scroll in silverlight controls?

  11. Thanks for sharing these. Has anyone recreated the standard Vista and MacOSX looks yet?

  12. Kellen pointed out that the list box scrollbar was getting cut off and this was due to the way I laid out my controls in the grid. Now it shouldn’t get cut off (if your resolution is 1024×768 or above). Also, I added focus visuals back in for all controls. Thanks Kellen 🙂

  13. Zqin says:

    非常精彩的Silverlight 2控件样式

  14. o0myself0o says:

    Thanks for sharing these!

    Something is wrong to the downloading of Bubbly.

  15. Depuis la mise a disponibilité de Silverlight 2 au Mix08 il y a eu beaucoup d’articles, de blogs sur

  16. TerryLee says:

    概述本期共有10篇推荐文章,由于忙着写Silverlight2系列,所以导读写的不多,都是三言两语带过,希望大家见谅。1.CreatingaCustomSkinforSilverlig…

  17. Jacky_Xu says:

    概述

    本期共有10篇推荐文章,由于忙着写Silverlight2系列,所以导读写的不多,都是三言两语带过,希望大家见谅。

    1.CreatingaCustomSkinforSilverl…

  18. Trips says:

    Hellow Brad, the zip file of Bubbly Theme (bubbly.zip) don’t work. Bye!

  19. Kellen says:

    Guess I’m a bit of a tough critic, the red, and the flat still have a few focus indicators missing, and it appears as if the dropdown doesn’t let you shift-tab… I swear, I’m a developer not a tester!

    Otherwise they look great! Thanks for making those updates you did.

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

  21. Mani says:

    Great Stuff…

    I tried to apply and modify Flat template. I wanted specific look of my list box items with border and specific backgroud color. I modified the "Normal State" Storybord to do this. Problem is… I do not see border untill I hower mouce over the item and move out. Seems like normal state is not being applied till the time you hover on the item for first time. Or may be I am doing something wrong…

    Here is the modified template part …. for reference.

    <Storyboard x:Key="Normal State">

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF416974"/>

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                   </Storyboard>

                                   <Storyboard x:Key="Normal Selected State">

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF213B43"/>

                                   </Storyboard>

                                   <Storyboard x:Key="MouseOver State">

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#00FFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF68A0AF"/>

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF000000"/>

                                   </Storyboard>

                                   <Storyboard x:Key="MouseOver Selected State">

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#00FFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF68A0AF"/>

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF000000"/>

                                   </Storyboard>

  22. Mani says:

    Great Stuff…

    I tried to apply and modify Flat template. I wanted specific look of my list box items with border and specific background color. I modified the "Normal State" Storyboard to do this. Problem is… I do not see border until I hover mouse over the item and move out. Seems like normal state is not being applied till the time you hover on the item for first time. Or maybe I am doing something wrong…

    Here is the modified template part …. for reference.

    <Storyboard x:Key="Normal State">

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF416974"/>

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                   </Storyboard>

                                   <Storyboard x:Key="Normal Selected State">

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF213B43"/>

                                   </Storyboard>

                                   <Storyboard x:Key="MouseOver State">

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#00FFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF68A0AF"/>

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF000000"/>

                                   </Storyboard>

                                   <Storyboard x:Key="MouseOver Selected State">

                                       <ColorAnimation Storyboard.TargetName="strokeColor" Storyboard.TargetProperty="Color" Duration="0" To="#00FFFFFF"/>

                                       <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF68A0AF"/>

                                       <ColorAnimation Storyboard.TargetName="fontColor" Storyboard.TargetProperty="Color" Duration="0" To="#FF000000"/>

                                   </Storyboard>

  23. topzengyi says:

    概述

    本期共有10篇推荐文章,由于忙着写Silverlight2系列,所以导读写的不多,都是三言两语带过,希望大家见谅。

    1.CreatingaCustomSkinforSilverl…

  24. So I was finally getting back around to reading a few of the blogs that I do. One of the blogs…

  25. brian says:

    So many comments but noone has the issue I have? Can anyone actually use these templates?  I have 12 errors,

    the type ‘Color’ does not support direct content.  Will Blend output this type oof file, so that you have to manually change the <color> tags by hand?

    As usual samples found on the web don’t really work.  One of the main problems with wpf and silverlight.

  26. Jason says:

    Hi, I got a error in Page.xaml , what is this ListData mean ?

    xmlns:dSrc="clr-namespace:ListData;assembly=Styles_Red"> Is it a assembly or something i missed,

    hope someone can help, appreciate

  27. sunjie says:

    本期共有10篇推荐文章,由于忙着写Silverlight2系列,所以导读写的不多,都是三言两语带过,希望大家见谅。

    1.CreatingaCustomSkinforSilverlight…