WPF Knowledge Points - 控件状态利器：VisualStateManager详解

VisualStateManager带来了什么？

在WPF中我们可以用各种Trigger配合Animation，Template来实现绚丽控件的外观变换，用后台逻辑来定义和标注控件不同的状态。.Net Framework 4.o开始引入了VisualStateManager，主要为了控制控件的状态转换，和其间涉及的外观行为。从控件状态迁移层面上管理空间的外观行为，在设计级别上感觉层次更清晰，边界更明确。VisualStateManager用途：
1. 管理控件状态。
2. 管理控件状态的转换逻辑。

我们通过VisualStateManager控件的状态、控件在特定状态下以及控件更改状态时的外观。更清晰的表述我们看下MSDN原文：
The VisualStateManager enables you to specify:
1. states for a control
2. the appearance of a control when it is in a certain state.
3. the appearance of a control when a control changes states.

VisualStateManager相关类

VisualStateManager常用类的相关结构，是比较典型的层层深入的包含结构，我们这里说明一些每一个层次的作用：
1. 通过在控件上设置VisualStateManager.VisualStateGroups附加属性向控件添加可视状态。
2. VisualStateGroups包含VisualStateGroup对象集合。
3. VisualStateGroup包含互斥的VisualState对象的集合。 在每个VisualStateGroup中，控件都始终恰好处于一个状态。
4. VisualState用于定义控件状态，和处于某个状态时的外观。
5. VisualState 包含Storyboard对象的集合，用于指定控件处于该状态时如何更改控件的外观。

下面的XAML更直观形象:

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="XXX">
<VisualState x:Name="State001">
<Storyboard>
<Animation_A1 .../>
<Animation_B1 .../>
...
Storyboard>
VisualState>
<VisualState x:Name="State001">
<Storyboard>
<Animation_A2 .../>
<Animation_B2 .../>
...
Storyboard>
VisualState>
...
VisualStateGroup>
...
VisualStateManager.VisualStateGroups>

我们这边给出一个实际定义VisualStateManager.VisualStateGroups的例子，在Windows Resource中定义一个Button Template，随着鼠标的Enter和Leave标识两种状态，根据不同的状态来显示不同的外观：rectangle或ellipse。

<Window.Resources>
<ControlTemplate x:Key="ButtonColorChangeStyleTemplate" TargetType="{x:Type Button}">
<Grid x:Name="LayoutRoot" Background="Transparent" MouseEnter="ShapeChangeMouseEvent" MouseLeave="ShapeChangeMouseEvent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Layout">
<VisualState x:Name="EllipseState">
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse" />
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" />
Storyboard>
VisualState>
<VisualState x:Name="RectangleState">
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse" />
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle"/>
Storyboard>
VisualState>
VisualStateGroup>
VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Fill="Blue" Height="90" Margin="2,2,2,2" Opacity="0" Stroke="Black" VerticalAlignment="Top"/>
<Ellipse x:Name="ellipse" Fill="Orange" Height="90" Margin="2,2,2,2" Opacity="1" Stroke="Black" VerticalAlignment="Top"/>
Grid>
ControlTemplate>
Window.Resources>

上面是一个在ControlTemplate中定义VisualStateManager.VisualStateGroups的例子，在应用程序中，控件之外定义也非常类似，下面的例子，在一个Button上随着鼠标的Enter和Leave定义两种状态，根据不同的状态来显示不同颜色：Orange或Blue。

<Grid>
<Button Template="{StaticResource ButtonColorChangeStyleTemplate}" Content="Button"
HorizontalAlignment="Left" Margin="39,17,0,0" Name="button1" VerticalAlignment="Top" Width="104" Height="95" />
<Button Name="button2" MouseEnter="ColorChangeMouseEvent" MouseLeave="ColorChangeMouseEvent" Margin="198,17,0,0" Height="88" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="MouseStates">
<VisualState Name="BlueState">
<Storyboard>
<ColorAnimation To="Blue" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
Storyboard>
VisualState>
<VisualState Name="OrangeState">
<Storyboard>
<ColorAnimation To="Orange" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
Storyboard>
VisualState>
VisualStateGroup>
VisualStateManager.VisualStateGroups>
<Button.Background>
<SolidColorBrush x:Name="rectBrush" Color="Orange"/>
Button.Background>
Button>
Grid>

状态迁移方法GoToState，GoToElementState

分别在ControlTemplate和应用程序中定义好了状态，我们来看一下状态迁移的方法：

1. GoToState, 用于转换定义在控件自身内部定义的状态（比较常见的标志就是状态定义在控件的ControlTemplate中）。
2. GoToElementState，用于转换由应用程序（而非控件自身）定义的状态。

对于这两种方法，VisualStateManager都执行相应逻辑，启动和停止与有关状态相关的StoryBoards，该逻辑是定义在默认的VisualStateManager的GoToStateCore方法中的，默认逻辑流程如下以GoToState为例（我们用旧State，新State表示状态的迁移，方便描述）：
1. 如果控件要转换到的新State有Storyboard，运行该Storyboard。如果控件的旧State有Storyboard，结束其运行。
2. 如果控件已处于新state状态（即新旧State相同），则GoToState不执行任何操作并返回true。
3. 如果新State在控件的ControlTemplate中不存在（因为是以GoToState为例，所以会去找ControlTemplate中的状态），则GoToState不执行任何操作并返回 false。

有了上面状态的定义，我们在C# Code中加入状态迁移的逻辑，演示GoToState，GoToElementState的用法。

private void ShapeChangeMouseEvent(object sender, MouseEventArgs e)
{
if (button1.IsMouseOver)
{
bool result = VisualStateManager.GoToState(button1, "RectangleState", true);
}
else
{
VisualStateManager.GoToState(button1, "EllipseState", true);
}
}

private void ColorChangeMouseEvent(object sender, MouseEventArgs e)
{
if (button2.IsMouseOver)
{
VisualStateManager.GoToElementState(button2, "BlueState", true);
}
else
{
VisualStateManager.GoToElementState(button2, "OrangeState", true);
}
}

程序运行结果：Button会根据鼠标的Enter和Leave改变形状和颜色。

提示1：注意分清GoToState，GoToElementState的使用场合。
提示2：当状态被成功改变时，方法返回true，否则false。要好好的应用这几个方法的返回值，因为一般情况下状态迁移的多没有明显的Exception抛出，更多的是storyboard没有被执行，UI没有任何反映，默默的出错（汗...）。应用返回值，可以得到状态是否成功迁移，有利于判断是我们storyboard逻辑问题，还是状态迁移问题等等。
提示3：如果需要和默认流程不一样的状态转换逻辑流程，我们可以继承VisualStateManager实现我们自己的VisualStateManager，并且重写 GoToStateCore方法。