Silverlight Skinning
I've never really done too much serious skinning, mostly I focus on apps and usually stick to skinning buttons, listboxes and scrollviewers and such. On Friday I ran across the latest results of the skinning competition over at scalenine and got inspired to see how much progress I could make on a more complete skin in Silverlight. I don't have too much raw design skill so I decided to start with cloning an existing skin rather than going off on my own.
I started off with the winning skin of the scalenine skinning competition and cloned a number of control skins including Checkbox, NumericUpDown, Calendar, and ListBox. All of these controls are from either the Silverlight runtime, SDK or Toolbox.
I decided to do all the theming in pure XAML- no code and no images. I used Expression Blend for the whole theming process and was actually pleasantly surprised by how smoothly the whole process went. I started out on TabControl which I had never really themed before, it took a few minutes for me to get into the swing of it but by the time I got through that and Button I was on a roll and quickly did Button, Checkbox, RadioButton and Calendar.
Calendar was the one that surprised me the most- I'm not a big fan (at all) of Silverlight's default Calendar theme and really tore into it. The Calendar went extremely smooth with good visual editing of all of the parts and various calendar modes. I even redid the entire layout to make it resize correctly (my personal pet peeve :))
Overall it took me ~5 hours to get started and crank out the first TabControl, Checkbox, RadioButton, ComboBox, Slider and Calendar controls, not too bad but I'm definitely getting faster now.
The original Flex version can be found here.
The Silverlight version-
Once I started getting the hang of the whole theming thing I decided to go off on my own a little bit more- still keeping with the original design but there were some parts of it that I wanted to simplify and make the theme a little more subtle.
I decided to call this new theme 'Seattle' since it's such a plain gray theme and this weekend was a plain gray Seattle weekend.
The 'Seattle' theme
All of these are still under development (see the TreeView in Seattle- not quite working properly yet...), but my attention span is short and I'm off to write a game now. C'est la vie.
posted by Pete Blois at 11/09/2008
7 Comments:
Hi I really liked the skin you have done for SL, is it possible to download project or XAML?
Thanks
Sachin
I'll be posting the project soon, the styles are functional but not quite ready for prime-time yet. I pulled out most of the disabled states and removed the focus visuals. I'd like to add these back in, and also consolidate some of the colors into resources.
Hi Pete,
Great post! I'm very excited about learning more about Themes now! Your PDC 2008 talk was great too! Any chance of you posting the "twitter" application you did that was re-themed by Celso Gomes? Seeing that done was amazing to me and I would love to study how it was done.
Best regards,
Chris
The Twitter source code can be found on the Expression team blog at http://blogs.msdn.com/expression/archive/2008/11/13/pdc-2008-session-microsoft-expression-blend-tips-and-tricks.aspx
Thanks Pete! :-) I just saw this mentioned on Scott Gu's blog post. I'm really looking forward to studying how this was all done. Thanks again.
Best regards,
Chris
This is great. I've been entertaining the idea of creating a site for sharing Silverlight themes as well.
Hi Pete,
Would you be willing to share your source yet, even though it's not 100% complete?
I've been trying to build my own theme for a while now and whereas I'm getting it right slowly but surely, I think your work could give me the boost in the right direction that I need :)
Awesome looking themes btw :D
Post a Comment
<< Home