A few weeks back around PDC, Microsoft released the Silverlight Toolkit a collection of Silverlight controls developers and designers can use in there Silverlight projects. What is really cool about the way in which Shawn Burke’s team is working on control development, is this idea of releasing controls on Codeplex to get them quickly into the community.

If you play around with the toolkit you will quickly stumble on a new assembly called: “Microsoft.Windows.Controls.Theming”.  In a nut shell what this class does is give control developers access to the ability to theme their controls.  One of the key elements of this assembly is the “ImplicitStyleManager”. This class exposes some attached properties that allow designers to specify an external resource file (.xaml) containing styles which can be applied to a control and each of the controls children.

Here is what i did to get my RatingControl to use the implicit style manager. First I added a reference in my page.xaml to the Theming namespace.

xmlns:theming="clr-namespace:
Microsoft.Windows.Controls.Theming;
assembly=Microsoft.Windows.Controls.Theming"

Next I inserted a a few attributes into my rating control declaration to specify the location of my theme and how I wanted my theme applied.  I choose “Auto” which applies the theme immediately when the control is loaded.


Lastly I copied my generic.xaml file into a new themes directory located in my test Silverlight project and renamed it to “themeA.xaml”. Just to prove that the theme was loading I changed my RatingButton style to display an ellipse instead of the default star’s I had used in my original example. Below is how it all turned out.

Code: Rating.zip

The control I choose to create is a Rating control .  The goal is to display a series of Stars that both visualize an overall average score, and allows a user to submit their own rating.  Here is what the control looks like.

RatingControl

The control is comprised of two components: RatingControl and RatingButton. The RatingControl is derived from ContentControl and can either be given an explicit set of RatingButtons, or can automatically create them based on a user setting. Here are the properties I have chosen to expose in RatingContorl:

• Max (Int): The number of RatingButtons to display
• Total (double): The number of votes that have been cast
• Score (double): The average rating across all  submissions
• UseIndicators(bool): Determines if we will display indicators for what each star represents.

There are two ways in which you can populate the rating control.  The first is to set the Max property and allow the control to add the appropriate number of children.  This works great if you don’t need to specify an individual Indicator (ToolTip) for each RatingButton.  The second approach is to explicitly add RatingButtons to the content property of the RatingControl.  Here is what that would look like in Xaml.

By choosing to have our RatingControl inherent from ContentControl it takes care of giving us the ability to set the children of our Content property.  In this example I am assuming a FrameworkElement derived from Panel (Grid or StackPanel) is placed inside of Content.  This makes it very easy to iterate through the panels children and identify each RatingButton.  The following shows the code I used to make the decisions if I would create my own RatingButtons, or use those specified in the RatingControl.Content element.

Since I was allowing this control to be templated, I choose to do this setup in the controls Loaded event handler.  This allows me to set the controls Content property equal to my manually created StackPanel, prior to the controls ApplyTemplate method being executed.  This ensures that any special formatting around the panel is applied after the RatingButtons have been added.

RatingButton

To minimize the amount of code I needed to write for this control I decided to build my RatingButton control on top of the System.Windows.Controls.Primitives.ToggleButton.  If you are not familiar with this control it is a very flexible Button that supports three states (Checked, Uncheked, Null).  This is perfect for my example where I will need my star to be visualizes as either filled, empty or half filled star.

For all extensive purposes I left the ToggleButton alone and only overrode OnToggle, OnMouseEnter and OnMouseDown.  Here is what that code looks like.

Since each RatingButton needs to behave as a group, I had to circumvent how the ToggleButton would change visual state, and allow RatingControl to manage this process.  The first method UpdateChecked, simply iterates over each rating button, and based on the Score, determines which ones would be checked.  For my visualization I decide that an average score > N.3, but < N.7 would visualize a half star, where as anything above or below would visualize a full or empty star.  I allow the IsChecked property of ToggleButton to switch to the appropriate visual state (Checked, UnChecked or Intermediate).

In the event that a user is hovering over the rating control, I want to visualize a different color of filled star.  Once again I need to allow the RatingControl to determine which RatingButtons need to react to the hover.  The following demonstrates how I achieved this effect.

Since once again we choose to circumvent how the ToggleButton switches state on hover, we must  use VisualStateManger.GotToState to trigger the appropriate state of the RatingButton we are evaluating (MouseOver or Normal).  

To  customize the visualization of the this control you can either edit my default style in Blend 2.5, or you can clone it and make your own changes. The Control template is as simple as I could make it to allow users full control over how the RatingButton icons look, and how the states are visualized. 

Code: Rating.zip