WPF: WPF 中的 Triggers 和 VisualStateManager

在之前寫的這篇文章 WPF: 只讀依賴屬性的介紹與實踐中，我們介紹了在 WPF 自定義控制項中如何添加只讀依賴屬性，並且使其結合屬性觸發器 (Trigger) 來實現對控制項樣式的改變。事實上，關於觸發器，在 WPF 中除了屬性觸發器，還有事件觸發器 (EventTrigger) 和數據觸發器 (Da ...

在之前寫的這篇文章 WPF: 只讀依賴屬性的介紹與實踐中，我們介紹了在 WPF 自定義控制項中如何添加只讀依賴屬性，並且使其結合屬性觸發器 (Trigger) 來實現對控制項樣式的改變。事實上，關於觸發器，在 WPF 中除了屬性觸發器，還有事件觸發器 (EventTrigger) 和數據觸發器 (DataTrigger)。此外，為了控制控制項外觀的切換，除了可以使用觸發器外，我們還可以使用 VisualStates 和 VisualStateManager 來完成。

本文接下來會分別簡單地介紹 Triggers 和 VisualStateManager，並且介紹一下它們的區別；瞭解這些，將會有助於我們在開發自定義控制項時，能夠明白何時選擇屬發器，何時選擇 VisualStateManager。

一、觸發器 (Triggers)

前面說過，觸發器有三類，它們分別是：

屬性觸發器 (Trigger/MultiTrigger)
事件觸發器 (EventTrigger)
數據觸發器 (DataTrigger/MultiDataTrigger)

這些觸發器的主要作用是：當指定屬性的值發生改變或者事件觸發時來更改控制項的外觀或行為；而且被觸發器監測的屬性必須是依賴屬性，事件必須是路由事件；它們能夠用在這些地方：DataTemplate, ControlTemplate, Style, 以及控制項的 Inline 屬性中。

1、屬性觸發器

特點：

UIElement 屬性改變時，執行 Trigger；
必須設置 Property 和 Value；必須包括 Setter 對象（不支持 EventSetter）；
可以設置 EnterActions 和 ExitActions；
當條件不符合時，會將屬性值還原到原來的值；

例如：

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" Value="0.5" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

MultiTrigger

特點：元素 (UIElement) 或控制項的多個屬性改變時，執行 Trigger，如：

<Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsPressed" Value="True" />
                <Condition Property="Background" Value="BlanchedAlmond" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="Foreground" Value="Blue" />
                <Setter Property="BorderThickness" Value="5" />
                <Setter Property="BorderBrush" Value="Blue" />
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

2. 事件觸發器

特點：

當 FrameworkElement 的路由事件(RouteEvent)觸發時，執行 EventTrigger；
通常用來執行一些動畫；
不會還原成原來的值（不像 Property Trigger 一樣）；

例如：

<Border  …>
    <Border.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard>
               <Storyboard>
                <ColorAnimation Duration="0:0:1" Storyboard.TargetName="MyBorder" 
                                Storyboard.TargetProperty="Color" To="Gray" />
               </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Border.Triggers>
 </Border>

3. 數據觸發器

特點：數據綁定源的值符合 Trigger 指定的條件時，執行 Trigger；例如：

    <DataTemplate.Triggers>
       <DataTrigger Binding="{Binding Path=Picture}" Value="{x:Null}">
        <Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png" />
        ……
       </DataTrigger>
    </DataTemplate.Triggers>

MultiDataTrigger

特點：當多個綁定值符合 Trigger 的 Conditions 指定的條件時，執行 Trigger；例如：

<DataTemplate.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding Path=Picture}" Value="{x:Null}" />
            <Condition Binding="{Binding Path=Title}" Value="Waterfall" />
        </MultiDataTrigger.Conditions>
        <MultiDataTrigger.Setters>
           <Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png"/>
           <Setter TargetName="viewImage" Property="Opacity" Value="0.5" />
           <Setter TargetName="viewText" Property="Background" Value="Brown" />
        </MultiDataTrigger.Setters>
    </MultiDataTrigger>
</DataTemplate.Triggers>

最後，要說明的是，對於控制項的內聯 (Inline) 屬性，僅能設置 EventTrigger，如：

<Button>
    <Button.Triggers>
        <EventTrigger …>
        </EventTrigger>
    </Button.Triggers>
</Button>

所以，總結來看，以上三類觸發器的使用場景就是當控制項的屬性值被更改或者事件被觸發時，更修改控制項的外觀或行為；並且屬性觸發器有獨特的特點，就是在屬性值還原時，樣式也會隨即恢復。

理解了這些，在開發自定義控制項時，我們就可以通過為自定義控制項合理地定義依賴屬性、只讀依賴屬性以及路由事件，來控制控制項的顯示。接下來，我們來看 VisualStateManager，它也可以解決同樣的問題。

二、VisualStateManager

要使用 VisualStateManager，需要定義 VisualState；在 VisualState 中定義控制項的不同的狀態以及每種狀態下的樣式，然後，在代碼中合適的地方，我們可以使用 VisusalStateManager 類的 GoToState 來切換到對應的狀態，從而實現樣式的切換。

所以，總括地說，這裡涉及了以下四個方面：

VisualState: 視圖狀態(Visual States)表示控制項在一個特殊的邏輯狀態下的樣式、外觀；
VisualStateGroup: 狀態組由相互排斥的狀態組成，狀態組與狀態組並不互斥；
VisualTransition: 視圖轉變 (Visual Transitions) 代表控制項從一個視圖狀態向另一個狀態轉換時的過渡；
VisualStateManager: 由它負責在代碼中來切換到不同的狀態；

每個 VisualState 都屬於一個狀態組 (VisualStateGroup)，也即一個 VisualStateGroup 中可以定義多個 VisualState；並且，我們也可以定義多個 VisualStateGroup；需要再次強調的是：同一個 VisualStateGroup 中 VisualState 是互斥的，而不同的 VisualStateGroup 中的 VisualState 是在同一時刻是可以共存的。以 Button 為例：

我們看到，在它裡面，定義了三個 VisualStateGroup，分別是 CommonStates（正常狀態）、FocusStates（焦點狀態）、ValidationStates（驗證狀態），而每個 VisualStateGroup 下又有若幹個 VisualState。在 CommonStates 中，按鈕可以是 Normal 、MouseOver 或 Pressed（只能是三者之一），但它卻可以結合其它 VisualStateGroup 中的 VisualState 來顯示，如按鈕具有焦點時且滑鼠移動到其上，這就結合了 MouseOver 與 Focused 兩種狀態。以下它的部分代碼：

<ControlTemplate TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:1" To="MouseOver" />
                    <VisualTransition GeneratedDuration="0:0:1" To="Pressed" />
                    <VisualTransition GeneratedDuration="0:0:1" To="Normal" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetName="BackgroundBorder"
                            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                            To="#A1D6FC"
                            Duration="0" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetName="BackgroundBorder"
                            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                            To="#FCA1A1"
                            Duration="0" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border
            x:Name="BackgroundBorder"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            SnapsToDevicePixels="true" />
        <ContentPresenter
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Focusable="False"
            RecognizesAccessKey="True"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
    </Grid>
</ControlTemplate>

在自定義控制項的開發過程中，我們也可以採用同樣的原則，即在 XAML 中定義 VisualStateGroup、VisualState 以及 VisualTransition（可選），由藉助於 VisualStateManager 來實現切換。以下是一個帶水印功能的 TextBox 中 VisualStates 的定義：

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="WatermarkGroup">
       <VisualStateGroup.Transitions>
           <VisualTransition From="ShowWatermarkState" To="HideWatermarkState">
              <Storyboard>
                 <DoubleAnimation Storyboard.TargetName="PART_Watermark"
                                  Storyboard.TargetProperty="Opacity" From="1"
                                  To="0" Duration="0:0:2" />
               </Storyboard>                                        
            </VisualTransition>
            <VisualTransition From="HideWatermarkState" To="ShowWatermarkState">
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="PART_Watermark"
                                   Storyboard.TargetProperty="Opacity" From="0"
                                   To="1" Duration="0:0:2" />
               </Storyboard>
            </VisualTransition>
         </VisualStateGroup.Transitions>
         <VisualState x:Name="ShowWatermarkState">
            <Storyboard>
               <ObjectAnimationUsingKeyFrames Duration="0:0:0"
                             Storyboard.TargetName="PART_Watermark"
                             Storyboard.TargetProperty="(UIElement.Visibility)">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0"
                             Value="{x:Static Visibility.Visible}"/>
               </ObjectAnimationUsingKeyFrames>
            </Storyboard>
         </VisualState>
         <VisualState x:Name="HideWatermarkState">
            <Storyboard>
               <ObjectAnimationUsingKeyFrames Duration="0:0:0"
                             Storyboard.TargetName="PART_Watermark"
                             Storyboard.TargetProperty="(UIElement.Visibility)">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0"
                             Value="{x:Static Visibility.Collapsed}"/>
               </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>                                
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

可以看出，它定義了 WatermarkGroup 組，併在其中定義了 ShowWatermarkState 和 HideWatermarkState 兩個 VisualState，並且，通過定義的 VisualTransition 能夠實現在這兩種狀態下切換時，水印文本會有淡入、淡出的效果。

最後，在代碼中，調用 VisualStateManager.GoToState 方法來切換到合適的狀態即可：

private void UpdateState()
{
   bool textExists = Text.Length > 0;
   var watermark = GetTemplateChild("PART_Watermark") as FrameworkElement;
   var state = textExists || IsFocused ? "HideWatermarkState" : "ShowWatermarkState";
 
   VisualStateManager.GoToState(this, state, true);
}
 
protected override void OnGotFocus(RoutedEventArgs e)
{
   base.OnGotFocus(e);
   UpdateState();
}
 
protected override void OnLostFocus(RoutedEventArgs e)
{
   base.OnLostFocus(e);
   UpdateState();
}

最後，何時切換狀態呢？一般情況下，包括但不限於以下幾個場合或地方：

在 OnApplyTemplate 方法（即應用模板時）；
當某個屬性改變時（可以在 PropertyChangedCallback 中調用）；
當某個事件發生後；

三、Triggers 與 VisualStateManager 的區別

以上我們看到 Trigger 和 VisualStateManager 都可以完成相同的事，不過它們也是有區別的，主要有以下幾點：

Triggers 僅僅在 XAML 中使用（儘管它可能要用到我們的自定義屬性或事件，但對於更改狀態這件事來說，我們只要在 XAML 中操作即可），而 VisualStateManager 則 XAML 和 C# 代碼都需要；
對於 Trigger，定義模板的人可以自由地指定當條件符合時時該有何種的變化；而對於 VisualStateManager，則需要控制項開發人員定義不同的 VisualState，然後定義模板的人根據約定（根據 TemplateVisualStateAttribute 特性）來定義在控制項不同狀態下的樣式；
對於 Trigger，它是對事件、屬性或者所綁定的數據發生變化時，作出對應的改變；而 VSM 則可以自由控制狀態的切換，並定在切換時，還可以指定 VisualTransition；
最後， VisualStateManager 不僅支持 WPF，而且也支持 UWP，我們可以說它是“跨平臺”的，而 Trigger 在 UWP 上不被支持。

總結

本文主要討論了 WPF 中的觸發器 Triggers 和 VisualStateManager，在設計自定義控制項時，它們都能夠輔以完成控制項樣式切換的功能；我們分別介紹了它們二者的使用方法以及使用要點；最後我們也總結了它們的區別。當我們瞭解了它們各自的特點以及它們的區別後，我們就可以有選擇地、更方便地來設計我們的自定義控制項，併在 WPF 開發過程中自由地運用它們。

參考資料：

VisualStateManager and alternative to Triggers