9. 可视化状态管理器

本章前面的"控件模板"中，介绍了如何创建控件模板，自定义控件的外观。其中还缺了些什么，使用按钮的默认模板，按钮会响应鼠标的移动和单击，当鼠标移动到按钮或单击按钮时，按钮的外观是不同的。这种外观变化通过可视化状态和动画来处理，由可视化状态管理器(VisualStateManager)控制。

本节介绍如何改变按钮样式，来响应鼠标的移动和单击，还描述了如何创建自定义状态，当几个控件应该切换到禁用状态时，例如进行一些后台处理时，这些自定义状态用于处理完整页面的变化。

对于XAML元素，可以定义可视化状态、状态组、和状态，指定状态的特定动画。状态组允许同时有多个状态。对于一组，一次只能有一个状态。然而，另一组的另一个状态可以在同一时间激活。例如，按钮的状态和状态组。按钮控件定义了状态组CommonStates和FocusStates。用FocusStates定义的状态是Focused、UnFocused和PointerFocused，CommonStates组定义了状态Normal、PointerOver、Pressed和Disabled。有了这些选项，多个状态可以同时激活，但一个状态组内总是只有一个状态是激活的。例如，按钮可以是Focused和Normal状态。它也可以是Focused和Pressed状态，还可以定义定制的状态和状态组。

下面看看具体的例子。

1. 用控件模板预定义状态

下图利用先前创建的自定义控件模板，样式化按钮控件，使用可视化状态改进它。为此，一个简单的方法是使用Microsoft Blend for Visual Studio，下图显示了状态窗口，选择控件模板时就会显示该窗口。在这里可以看到控件的可用状态，并基于这些状态记录变化。

之前的按钮模板改为可视化状态：Pressed、Disabled和PointerOver。在状态中，Storyboard定义了一个ColorAnimation来改变椭圆的Fill属性的颜色：

<Page.Resources> <Style x:Key="RoundedGelButton" TargetType="Button"> <Setter Property="Width" Value="100"/> <Setter Property="Height" Value="100"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" To="#FFC8CE11" Storyboard.TargetName="GelBackground" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" d:IsOptimized="true"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ColorAnimation Duration="0" To="#FF606066" Storyboard.TargetName="GelBackground" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" d:IsOptimized="True"/> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <ColorAnimation Duration="0" To="#FF0F9D3A" Storyboard.TargetName="GelBackground" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" d:IsOptimized="True"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Ellipse x:Name="GelBackground" StrokeThickness="0.5" Fill="Black"> <Ellipse.Stroke> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#ff7e7e7e"/> <GradientStop Offset="1" Color="Black"/> </LinearGradientBrush> </Ellipse.Stroke> </Ellipse> <Ellipse Margin="15,5,15,50"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#aaffffff"/> <GradientStop Offset="1" Color="Transparent"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <ContentPresenter x:Name="GelButtonContent" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources>

现在运行应用程序，可以看到颜色随着鼠标的移动和单击而变化。

2. 定义自定义状态

使用VisualStateManager可以定义定制的状态，使用VisualStateGroup和VisualState的状态可以定义定制的状态组。下面的代码片段在名为CustomStates的组内创建了Enabled和Disabled状态。该可视化状态管理器在主窗口的网格中定义。改变状态时，Button元素的IsEnabled属性使用DiscreteObjectKeyFrame动画立即改变：

<Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CustomStates"> <VisualState x:Name="Enabled"/> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button1" Storyboard.TargetProperty="Control.IsEnabled"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <x:Boolean>False</x:Boolean> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2" Storyboard.TargetProperty="Control.IsEnabled"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <x:Boolean>False</x:Boolean> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel Spacing="10"> <Button Content="Click Me!" Style="{StaticResource RoundedGelButton}"/> <Button x:Name="button1" Content="OnEnable" Click="OnEnable"/> <Button x:Name="button2" Content="OnDisable" Click="OnDisable"/> </StackPanel> </Grid>

3. 设置自定义的状态

现在需要设置状态。为此，可以调用VisualStateManager类的GoToState方法。在代码隐藏文件中，OnEnabled和OnDisabled方法是页面上两个按钮的Click事件处理程序：

private void OnEnable(object sender, RoutedEventArgs e) { VisualStateManager.GoToState(this,"Enabled",useTransitions:true); } private void OnDisable(object sender, RoutedEventArgs e) { VisualStateManager.GoToState(this,"Disabled",useTransitions:true); }

在真实的应用程序中，可以以类似的方式更改状态，例如执行网络调用时，用户不应该处理页面内的一些控件。用户仍应被允许单击取消按钮。通过改变状态，还可以显示进度信息。