WPF Knowledge Points

来源：互联网发布：淘宝直播小二编辑：程序博客网时间：2024/05/20 18:45

转自https://www.cnblogs.com/KeithWang/archive/2012/03/30/2425588.html

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和应用程序中定义好了状态，我们来看一下状态迁移的方法：

GoToState, 用于转换定义在控件自身内部定义的状态（比较常见的标志就是状态定义在控件的ControlTemplate中）。
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方法。

阅读全文

0 0