[Updated] - You can now preview the controls here.

I'm pleased to announce the availability of my first Silverlight 2 controls set: 'Dave's Glossy Controls for Silverlight 2'.

splash_v1.2

[download link at end of post]

This is a set of easily customisable control templates for the following controls:

  • Button
  • CheckBox
  • RadioButton
  • ScrollBar
  • ScrollViewer
  • ListBox
  • ListBoxItem
  • TextBox
  • Slider
  • ProgressBar
  • ComboBox

They were all created in Blend SP1 preview (available here) for Silverlight 2 RC0 (available here).  Please note that these templates will not work with Silverlight Beta 2.

Importing the controls

To import these controls, open the file DavesGlossyControls_v1.2.xaml, copy the contents between <Application.Resources> and </Application.Resources>, and paste into your app.xaml between th two corresponding tags.

You may also need to copy across some of the namespace references in the very top of the file (they begin with xmlns).

Using the controls

Using the controls couldn't be easier.  It's so easy, there are three ways to do it!

The most important part is the Resources panel on the right of the screen.  It's to the right of the Project and Properties panels.  You should see a list of all of the controls and gradients underneath app.xaml.  If you can't, it's probably because you're viewing app.xaml in the Designer or XAML view, so flip back to Page.xaml.

From the resources panel you can click a control and drag it to the artboard to drop a control.

resources_panel

OR

You can draw the control you want to style (in this case a Button), then drag and drop the relevant style from the Resources panel onto the button.  A context menu will appear asking what you want to do to the control.  You should click 'Style' to apply the style.

drag_drop

OR (my favourite)

Create a control (in this case a button).  Right click on it and choose 'Edit Control Parts (Template) from the context menu, then 'Apply Resource', then the control template name.  This method is great as it only shows you control templates that are compatible with the currently selected control.

apply_resource 

Customising the colour of the controls

Again, customising the colour of the controls is tres easy, and doesn't require you to have any knowledge of control templates. 

Each control template is made up of a selection of colours and gradients.  These gradients are shown in the Resources panel.  To edit a gradient or colour, click on it and change the colours using the panel.  As you change them, you'll notice that all of the controls update too.

change_colours

License

These controls templates are licensed under the Microsoft Public License.

Finally

I hope you enjoy using these control templates in your projects.  I'd love to see/hear how you use/modify them, so please email me!

I'm trying to figure out how to do datagrids and date pickers at the moment; editing of these controls for Silverlight 2 isn't supported by Blend yet (that I'm aware of), so I'm going to have to learn some more XAML!

 download preview

Dave's Glossy Controls for Silverlight 2 - version 1.2 (06-Oct-2008)