Red and Flat Skins Updated for Beta 2


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.


 

Comments (17)

  1. huug says:

    Thank you very much, great job. I couldn’t have done this myself (and I have tried :))!

    I’m using the flat skin. I tweak the listbox style so it’s more like a readonly, not selectable repeater-like control by removing yellow and the focus border for selected items.

    One thing I sometimes would like to see are the arrow buttons for srolling one item at a time.

    One note: the red skin’s date time pickers renders the date invisible after you select a date.

  2. Corrina says:

    Hi Huug,

    I just fixed the date picker issue where after picking the date in the calendar the text is invisible in the datepicker textbox. Thanks for finding this. Also, I think I’ll try to put together a version of the flat style with the scrollbar arrows after I finish updating the other two styles 🙂

    • Corrina
  3. Mino has a SL2B2 video player drop-in, Emil Stoychev on Custom Controls, Tamir Khason on a binding bug

  4. Brad Abrams says:

    I had a little time while traveling to South Africa so I thought I’d update my Silverlight FlickR demo

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

  6. Corrina Barber updated Red &amp; Black skins, Mike Snow on Isolated Storage, Tim Heuer on S3 and SL2B2

  7. TerryLee says:

    CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式,这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时,由于引入了…

  8. ASPInsiders says:

    Bunch of stuff I’ve been meaning to blog about recently, in no particular order: The SideShow Team Blog

  9. cnblogs.com says:
    1. 微软公司宣布发布 Virtual Earth&#160; ASP.Net 服务器控件。 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160
  10. cleverboy says:

    CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式,这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时,由于引入了…

  11. Kathy Kam says:

    &lt;Editorial Note&gt; I am delighted to have Jason to write this awesome blog showing everyone how to