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方法。