在引用VisualStateManager之前，需要先引入命名空间，这是Silverlight 2 Beta 2的一个已知Bug。如下代码所示：
接下来我们定义视觉状态组，在上篇文章中我们就介绍过CheckBox的状态组，总共有三个：FocusStates、CommonStates、CheckStates，这里我们只定义CommonStates和CheckStates状态组，大家可以自行定义FocusStates状态组，如下代码所示：
<!-- CommonStates StateGroup-->
<vsm:VisualStateGroup x:Name="CommonStates">
</vsm:VisualStateGroup>
<!-- CheckStates StateGroup-->
<vsm:VisualStateGroup x:Name="CheckStates">
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
这里需要为每个视觉状态组指定名称，且名称是固定的。
定义视觉状态
现在我们添加视觉状态到状态组，在CommonStates和CheckStates状态组中，总共有7个状态，如下表所示：
首先我们来定义CommonStates状态组，代码如下所示：
<vsm:VisualStateGroup x:Name="CommonStates">
<!-- Normal State -->
<vsm:VisualState x:Name="Normal">
</vsm:VisualState>
<!-- MouseOver State -->
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</vsm:VisualState>
<!-- Pressed State -->
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</vsm:VisualState>
<!-- Disabled State -->
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
对于每一个视觉状态，主要有两部分组成：
一是命名：我们需要为视觉状态指定一个名称，且名称为固定的，这样VisualStateManager才能够找到相应的状态；
二是故事板：指定状态变化时的视觉呈现。
现在我们来实现每一个状态，对于Normal状态，不用作任何定义，因为它的定义与控件的基础状态一致，如下代码所示：
<vsm:VisualState x:Name="Normal">
</vsm:VisualState>
