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...
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...
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...
Flat Skin
View live...
Download 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
- Anonymous
June 15, 2008
PingBack from http://blog.a-foton.ru/2008/06/16/red-and-flat-skins-updated-for-beta-2/ - Anonymous
June 15, 2008
PingBack from http://www.travel-hilarity.com/airline_travel/?p=5222 - Anonymous
June 15, 2008
The comment has been removed - Anonymous
June 16, 2008
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 - Anonymous
June 16, 2008
Mino has a SL2B2 video player drop-in, Emil Stoychev on Custom Controls, Tamir Khason on a binding bug - Anonymous
June 16, 2008
http://blogs.msdn.com/corrinab/archive/2008/06/16/8602865.aspx - Anonymous
June 19, 2008
The comment has been removed - Anonymous
June 24, 2008
PingBack from http://www.silverlightarticles.com/?p=131 - Anonymous
July 13, 2008
Click here to view the Silverlight Skin demo You will need the Beta 2 plugin from here . Since Silverlight - Anonymous
July 16, 2008
Corrina Barber updated Red & Black skins, Mike Snow on Isolated Storage, Tim Heuer on S3 and SL2B2 - Anonymous
July 20, 2008
CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式，这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时，由于引入了... - Anonymous
July 21, 2008
PingBack from http://leeontech.wordpress.com/2008/07/21/dynamic-styles/ - Anonymous
July 28, 2008
Bunch of stuff I’ve been meaning to blog about recently, in no particular order: The SideShow Team Blog - Anonymous
July 29, 2008
微软公司宣布发布 Virtual Earth  ASP.Net 服务器控件。                                           - Anonymous
August 01, 2008
CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式，这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时，由于引入了... - Anonymous
August 25, 2008
<Editorial Note> I am delighted to have Jason to write this awesome blog showing everyone how to - Anonymous
August 26, 2008
PingBack from http://www.davidezordan.net/blog/?p=364