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

Please note: This sample was made into a Code Plex project and is maintained there. Please download all source from http://www.codeplex.com/sl2videoplayer/

In my ongoing quest to work with Silverlight 2 I embarked on building my own video player using the standard MediaElement and a few of the new System Controls (ToggleButon, Slider and Button). My goal was to build a video player using no custom user controls, but instead leveraging controls styles and templates.  Here is the Video Player I ended up developing.

As you can see from my example, I was able to get a pretty clean look and feel with minimal artistic skills required.   The way my player is constructed, I have opted to encapsulate the controls for playing video into its own UserControl.  This allowed me to have a single place responsible for managing playback while allowing the main xaml page to control how the MediaElement is presented.  To give the controller access to a specific MediaElement, I pass it to my controller via a public property.

Most of the customization techniques I used are pretty well documented on MSDN.  Nonetheless, mastering controls styles was definitely a challenge. For those unfamiliar with control styles, here is an example of the xaml I used to "skin" my mute button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style x:key="speakerStyle" targettype="Button">
  <setter property="Template">
    <setter.value>
      <controltemplate targettype="Button">
        <grid x:name="RootElement">
          <path stretch="Fill" fill="#FFFFFFFF" data="F1 M 23.1457,
            26.5056L 23.1457,33.8944l 25.7913,33.8944l 28.8235,37.4722l 
            30.5346,37.4722l 30.5665,23.0833l 28.8995,23.0833l 25.8679,
            26.5056l 23.1457,26.5056 z " Width="7.42080116271973" 
            height="14.3889999389648"/>
        </grid>
      </controltemplate>
    </setter.value>
  </setter>
</style>

This is about as simple a skin as one can get. If I were doing this for a real client I would have certainly choose to give my button multiple states (MouseOver, Down, ect) In Silverlight 2 control states are achieved by including specific named Storyboards in your ControlTemplate resource dictionary. Each control provides a different set of pre defined states. Here is a list of the states available for a ToggleButton.

• Checked State – The normal checked state of the control.
• Indeterminate State – The normal indeterminate state of the control.
• Normal State – The normal unchecked state of the control.
• MouseOver Checked State – The state that is triggered when the mouse pointer is positioned over the checked control.
• MouseOver Indeterminate State – The state that is triggered when the mouse pointer is positioned over the indeterminate control.
• MouseOver Unchecked State – The state that is triggered when the mouse pointer is positioned over the unchecked control.
• Pressed Checked State – The state that is triggered when the checked control is pressed.
• Pressed Indeterminate State – The state that is triggered when the indeterminate control is pressed.
• Pressed Unchecked State – The state that is triggered when the unchecked control is pressed.
• Disabled Checked State – The state that is triggered when the checked control is disabled.
• Disabled Indeterminate State – The state that is triggered when the indeterminate control is disabled.
• Disabled Unchecked State – The state that is triggered when the unchecked control is disabled.

In my example I use the ToggleButton to control playback of the video.  Instead of creating two buttons, one for play and one for pause, I  choose to use a ToggleButton to combine them into one.  I display a play symbol when the video is stopped or paused, and a pause symbol when the video is playing.  The ToggleButton functions just like a checkbox, clicking it once "check’s" it while clicking it again "uncheck’s" it.   The following  is a sample of one of the Storyboards I used in skinning my ToggleButton. This animation controls which elements are visualized when a users presses the ToggleButton in an previously checked state.

1
2
3
4
5
6
7
8
9
10
11

<storyboard x:key="Pressed Checked State">
   <doubleanimation duration="0:0:0.1" 
     storyboard.targetname="playSymbol" 
     storyboard.targetproperty="Opacity" to="0" />
   <doubleanimation duration="0:0:0.1" 
     storyboard.targetname="pauseSymbol" 
     storyboard.targetproperty="Opacity" to="1" />
   <doubleanimation duration="0:0:0.1" 
    storyboard.targetname="buttonPressed" 
    storyboard.targetproperty="Opacity" to="1" />
</storyboard>

In the code above, I am ensuring that the play symbol is hidden while I show both a pause symbol and an glow image used to show the button is being pressed.

As for procedural code, all of the heavy lifting is done in the mediaControl.xaml.cs codebehind file.  The majority of code is event handlers responding to user interactions (clicks, drags,etc) or a single DispatcherTimer monitoring progress in the video playback.  My  DispatcherTimer fires a tick every 50 milliseconds which update how much time has played and visualizes on a slider how much time remains.

Code: Code Plex