Normal状态效果如下图所示：
定义MouseOver视觉状态，当鼠标移上时高亮显示Glow，修改Opacity属性从0到1，如下代码所示：
<!-- MouseOver State -->
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
MouseOver状态效果如下图所示：
定义Pressed视觉状态，按下鼠标时，改变HighlightBorder的Opacity属性，并且修改InnerBorder的边框渐变，如下代码所示：
<!-- Pressed State -->
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBorder"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".6"/>
<ColorAnimation
Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0" To="#FF000000"/>
<ColorAnimation
Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0" To="#FF000000"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBorder"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".6"/>
<ColorAnimation
Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0" To="#FF000000"/>
<ColorAnimation
Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0" To="#FF000000"/>
</Storyboard>
</vsm:VisualState>
Pressed状态效果如下图所示：
定义Disabled视觉状态，设置Root元素的Opacity属性为0.5，如下代码所示：
<!-- Disabled State -->
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".5"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".5"/>
</Storyboard>
</vsm:VisualState>
Disabled状态效果如下图所示：
现在我们来定义CheckStates视觉状态组，如下代码所示：
<!-- CheckStates StateGroup-->
<vsm:VisualStateGroup x:Name="CheckStates">
<!-- Unchecked State -->
<vsm:VisualState x:Name="Unchecked"/>
<vsm:VisualStateGroup x:Name="CheckStates">
<!-- Unchecked State -->
<vsm:VisualState x:Name="Unchecked"/>
<!-- Checked State -->
<vsm:VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</vsm:VisualState>
<!-- Indeterminate State -->
<vsm:VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
