谈谈Silverlight 2中的视觉状态管理 Part2

首先我们来定义CommonStates状态组，代码如下所示：

<!-- CommonStates StateGroup-->
<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状态，不用作任何定义，因为它的定义与控件的基础状态一致，如下代码所示：

<!-- Normal State -->
<vsm:VisualState x:Name="Normal">
</vsm:VisualState>

Normal状态效果如下图所示：