Silverlight 2 Control Skins
Last week, Silverlight 2 beta one was the hot topic at the Mix 08 conference that took place in Las Vegas, and rightly so, as it now has even more great functionality to offer, and you can find out about specific details on Silverlight.net or on Scott Guthrie's blog. Scott's blog also contains several very informative walkthroughs detailing how to use much of the new functionality, and I highly recommend checking it out.
One of the new aspects of Silverlight 2 that I'm most psyched about right now is the new set of controls that it has to offer; which includes...
- Button
- Toggle Button
- Radio Button
- Checkbox
- Texbox
- Tooltip
- Hyperlink
- Slider
- ScrollViewer
- Calendar
- Datepicker
- DataGrid
- ListBox
- etc…
The default controls look great as is, but I need variety, so a designer friend of mine and I decided to put together a few new sets of styles for the controls listed above. We now have three different sets that are ready for you to check out and two more that will be ready for consumption within the next two weeks. Here’s what we have now, and you can view the styled controls in action or download them to add to your project (Page.xaml contains my sample page layout and App.xaml contains the style definitions)….
The download for the Flat set of styles also contains a Page.xaml.cs, and a Page.xaml.vb file. The reason these files are there is because I'm auto generating my columns in my data grid and the only way I can control the styles for the column content is through code (I'm changing fontfamily and fontsize). If I weren't autogenerating the columns I could control the style for the column content in the way I have for every other control (in the case of datagrid, I would use ElementStyle and EditingElementStyle).
The following set of steps describe some of the ways that you can apply these styles to your project.
Apply Styles Globally
To use the styles globally in your project, open your App.xaml file and replace your <Application.Resources>...</Application.Resources> with my <Application.Resources>...</Application.Resources> for the set of styles that you are interested in using.
Then, you can utilize the styles for controls throughout your project by adding a reference to the style of interest. For example, for button you would add the bold text below to the button tag,
<Button Content="hi" Style="{StaticResource buttonStyle}"/>
Apply Styles to a Particular XAML Page
To use the styles in a particular XAML page, open the page and add the following below the opening UserControl tag, <UserControl.Resources></UserControl.Resources>, and then copy and paste my styles from App.xaml into the tag (minus <Application.Resources></Application.Resources>)
Then, you can utilize the styles for controls throughout the XAML page by adding a reference to the style of interest. For example, for button you would do exactly as described in the previous example, and add the bolded text below to the button tag,
<Button Content="hi" Style="{StaticResource buttonStyle}"/>
Apply a Style to a Particular Control Inline
To use a style for a particular control inline, place the style directly in the control of interest. For example, for button you would add the following to your button tag (you also need to remove the x:Key attribute from the style tag as shown in the comment below)
<Button Content="hi">
<Button.Style>
<!-- Button -->
<!-- ORIGINAL STYLE TAG NEEDS X:KEY REMOVED AS SHOWN BELOW, HERE'S THE ORIGINAL TAG ----> <Style x:Key="buttonStyle" TargetType="Button">-->
<Style TargetType="Button">
<REST OF STYLE HERE BUT I'M NOT SHOWING IT :)-->
</Style>
</Button.Style>
</Button>
Please ping me with questions if anything is unclear.
