As you know, Visual State Manager is a Silverlight 2 (and WPF Toolkit) platform feature that makes it easy to define a control’s visual states and to perform the transitions between states. In the case of a templated control (such as Button, CheckBox, etc) you need only fill in the states advertised by the control (using Blend’s States pane), and the control itself will take care of performing the transitions at the right time. But if you’re writing your own UserControl then you need to add your own states to the control and you also need to know how to handle events and call VisualStateManager.GoToState() to transition between your states. Attached to this blog post is a base class that I hope will get you off to a good start. Basically you can derive your own UserControl from this class and override some methods and hopefully that will have saved you some work.

First, download and extract the StatefulUserControlBase.cs source code file from the following location:

	Download StatefulUserControlBase.cs
	VSMTour Sample

Once you’ve downloaded and extracted the source code file (StatefulUserControlBase.cs) you can try out the following steps.

1. Launch Blend 2 SP1, create a new Silverlight 2 project named VSMTour.
    
2. Add a new UserControl named CheckBoxUC, build, and create an instance of CheckBoxUC in Page.xaml.
    
3. Add an existing item to the project and navigate to the StatefulUserControlBase.cs file you downloaded and extracted.
    
4. Open CheckBoxUC.xaml and add the elements you feel are necessary to represent a checkbox: at a minimum, just a checkmark and a label.
    
5. Add a new state group named CommonStates containing the states Normal, MouseOver, Pressed and Disabled. Add a new state group named CheckStates containing the states Unchecked and Checked.
    
6. In CheckBoxUC.xaml.cs add a using directive for the BlendHelpers namespace (using BlendHelpers;) and replace the class definition with the following:

public partial class CheckBoxUC : BlendHelpers.StatefulUserControlBase
{
    CheckTwoStatesEnum _checkState = CheckTwoStatesEnum.Unchecked;

    public CheckBoxUC()
    {
        // Required to initialize variables
        InitializeComponent();
    }

    protected override void UserControl_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        if (IsEnabled)
        {
            _checkState = (CheckTwoStatesEnum)(1 - (int)_checkState);
        }

        base.UserControl_MouseLeftButtonUp(sender, e);
    }

    protected override void UpdateState()
    {
        InternalGoToState(_checkState.ToString());
        base.UpdateState();
    }
}

1. In CheckBoxUC.xaml, in the XAML editor, add the following attribute to the root xml element:
   xmlns:BlendHelpers="clr-namespace:BlendHelpers"
    
2. In CheckBoxUC.xaml change the type of the root element from UserControl to BlendHelpers:StatefulUserControlBase.
    
3. Build and run.

You now have a functioning two-state checkbox in the form of a UserControl. All you need to do next is to define the states as you would for the built-in CheckBox control. Naturally you won’t want to reproduce the built-in controls with your own UserControls, but now you know how to extend the base class you’ll be ready to do something more practical.
 
A completed sample is also provided.
 
-Steve