在CheckStates视觉状态组中有三个状态:Unchecked、Checked、Indeterminate。其中Unchecked与我们上面介绍Normal状态是一致的,所以不用设置故事板。接下来定义Checked视觉状态,如下代码所示:
<!-- Checked State -->
<vsm:VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Checkmark"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Checkmark"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
Checked视觉状态效果如下图所示:
定义Indeterminate视觉状态,在CheckBox使用时要呈现该状态,必须设置IsThreeState属性为True,它的定义如下代码所示:
<!-- Indeterminate State -->
<vsm:VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="IndeterminateRect"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="IndeterminateRect"
Storyboard.TargetProperty="Opacity"
Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
Indeterminate视觉状态效果如下图所示:
定义视觉状态迁移
在上面一部分中,我们定义了所有的视觉状态,但是各个状态之间的状态过渡效果并没有显示出来,现在我们定义视觉状态迁移。视觉状态迁移是定义在每一个视觉状态组中的,在Transitions下我们可以定义一系列的状态迁移。定义CheckStates状态组的视觉状态迁移,如下代码所示:
<!-- CheckStates Transitions-->
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="0:0:.2" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="0:0:.2" />
</vsm:VisualStateGroup.Transitions>
这里的Duration定义了状态迁移需要的时间长度。这里定义的视觉状态迁移是默认的对所有状态都是用,同时VisualTransition还允许我们针对特殊的状态进行特别的处理,它为我们提供了From和To属性来指定特定的状态,可以只定义其中一个或者两者都定义:
如在CommonStates状态组中,视觉状态迁移代码定义如下:
<!-- CommonStates Transitions-->
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="0:0:.5" />
<vsm:VisualTransition Duration="0:0:0.8" To="MouseOver"/>
<vsm:VisualTransition Duration="0:0:0.2" From="Pressed"/>
<vsm:VisualTransition Duration="0" From="MouseOver" To="Pressed"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="0:0:.5" />
<vsm:VisualTransition Duration="0:0:0.8" To="MouseOver"/>
<vsm:VisualTransition Duration="0:0:0.2" From="Pressed"/>
<vsm:VisualTransition Duration="0" From="MouseOver" To="Pressed"/>
</vsm:VisualStateGroup.Transitions>
可以看到除了定义默认的状态迁移之外,我们还为MouseOver和Pressed状态定义了特定的迁移效果。
总结
本文我们通过自定义一个CheckBox的外观,讲解了如何使用VisualStateManager来管理控件的视觉状态,在Silverlight 2中视觉状态管理的强大之处还在于我们可以可视化的进行定制。