Red and Flat Skins Updated for Beta 2

  • Article

Silverlight 2 beta 2 was just released on June 6th with lots of new features and functionality (check out Scott Guthrie's blog for specific details). Control skinning has changed slightly since in beta 1, and I just finished updating my red and flat skins for beta 2. In this update, I've template bound most of the control colors and added resources for these colors as well to make it very easy to customize the appearance for a particular need. There are several ways you can do this. One way would be to use Blend...

  • Create a new Silverlight 2 project in Blend
  • Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
    *Do not include DatePicker or Calendar style xaml in this step as these controls cannot be styled in Blend at this time and will prevent your UI from rendering at all if included
  • Add a control to the design surface from the toolbox
  • In the Objects and Timeline tool window, select the control you've just added to the design surface, and right click and select Edit Control Parts (Template) -> Apply Resource -> "select the appropriate style resource associated with the control"
  • The control will now have the style applied to it and if you switch to "Design" view you will see this
  • With the control selected, open the Properties tool window and you can change the Background, BorderBrush, or Foreground colors as desired (if they were set in my style)

Another way would be to...

  • Create a new Silverlight 2 project in Visual Studio
  • Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
  • Add a control to the design surface from the toolbox
  • Manually add a style reference to the appropriate style xaml
  • Modify the color resources found in Page.xaml (near the top of the page)

Here's an example of how you might do this. In this case, I'm changing the colors of all Flat controls to pink hues by simply changing three color resources.

<!-- Resources -->

<SolidColorBrush x:Key="BaseColorBrush" Color="Pink"/>

<SolidColorBrush x:Key="HoverBrush" Color="PaleVioletRed"/>

<SolidColorBrush x:Key="HyperlinkBrush" Color="PaleVioletRed"/>

And, this is what the controls would look like with these simple changes...

Flat Style in Pink

 

In this case, I'm changing the colors of all Red controls to blue and purple hues by simply changing the three color resources you see below.

<!-- Resources -->

<SolidColorBrush x:Key="BaseColorBrush" Color="CadetBlue"/>

<SolidColorBrush x:Key="HoverBrush" Color="Purple"/>

<SolidColorBrush x:Key="HyperlinkBrush" Color="Plum"/>

And, this is what the controls would look like with these simple changes...

RedSkin in Blue and Purple

 

Below you'll find a link to live versions of each control set and access to my sample projects. There are a few things to keep in mind when you start digging into the projects. First, the Calendar control requires some code in order to hook up to the day and month button styles (this issue will be fixed in the future). This code is found in Page.xaml.cs. Second, the Calendar control will not template bind to colors and nor will it use global resources, so you will have to go into the Calendar style xaml and manually update each color to your desired color (this issue will be fixed in the future). 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 due 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).

If you check out these styles, I'd love to know what you think about the ability to tweak the control colors, and I'd also like to know what other sorts of customizations you would like to do along these same lines. Also, is the ability to style ToolTip important to you? I can't wait to hear your feedback!

Red Skin
View live...
Download skin...

Red Skin

Flat Skin
View live...
Download skin...

Flat Skin

One last thing, I'm working on updating the two other styles and hope to have these up within the next two weeks.