blogs.conchango.com

welcome to the conchango blogging site
Welcome to blogs.conchango.com Sign in | Join | Help
in Search

Felix Corke's Blog

Designing a Silverlight 2 Beta 2 Skin with Blend - Free download (with source files!)

Silverlight 2 Beta 2 Skin

Click here to view the Silverlight Skin demo
You will need the Beta 2 plugin from here.

Since Silverlight 2 Beta 2 came out and trashed my Beta 1 skin that I'd lovingly hand-crafted in code view, and with the new June preview version of Expression Blend with the super-helpful Visual State Manager (VSM) I decided to have another crack at the skinning process using the new tools and controls available.

First up was a look at the VSM, using Scott Gu’s handy walkthough – this seemed simple enough, basically it allows you to visually style controls as you would in WPF, rather than all hand-coded like you had to with the previous versions of Silverlight. One of the biggest helps was that all the applicable/available states for the controls are listed for you in VSM, and adding transition times to state groups as well as individually was a real help.

Also the new controls merit a quick intro, the ones I looked at were the Tab Panel & Tab Items and the Grid Splitter (See Tim Heuers post on how to add them to your project as they aren’t included by default). Also available are the Date Picker and the DataGrid, although I didn’t skin those as for now you can’t style them visually in Blend – as CorrinaB says in her post:

Next, ToolTip is no longer stylable. I plan to create my own ToolTip control that is stylable in the near future, but until then you'll have to make do with the default style we provide for you. Lastly, you cannot style the Calendar, DatePicker, or DataGrid controls in Blend. In fact, you can't include style xaml for Calendar and DatePicker in a project you plan to open in Blend or none of the UI will render (this problem will be fixed in the future).

I may come back and add custom styles later in code but it seems like it may be quite time-consuming. Talking of Corrina B, I can’t emphasise how helpful and informative her blog is. If you want to get started in Silverlight styling, download her skin and get dabbling. I used her Slider control xaml as a basis for mine as I found that particular control quite tricky to get right on my own.

Default vs Custom preloader screensOne cool new feature is that you can customise the loading screen so rather than the boring default loading screen you can brand it and style it and give it a meaningful progress bar. You can read about how to make your own here: silverlight.net/quickstarts/BuildUi/SplashScreen.aspx

All in all, Silverlight 2 Beta 2 is a big improvement, and the VSM & June edition of Blend will make Silverlight a lot more approachable to visual designers.

You can view a demo of my skin here and download the project here (.zip 2.5Mb)

Published 14 July 2008 10:36 by felix.corke

Comments

 

Community Blogs said:

Fons Sonnemans with RollMenu, Frank LaVigne with Community Megaphone SL Map, Martin Mihaylov on LINQ

July 14, 2008 22:21
Anonymous comments are disabled
Powered by Community Server (Personal Edition), by Telligent Systems