首页 > 代码库 > VisualStateManager

VisualStateManager

2024-07-29 04:03:26   210人阅读

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

VisualStateManager


联系
我们