WPF 觸發器Triggers

 這一篇，總結Triggers。

      FrameworkElement、Style、ControlTemplate和DataTemplate都具有一個類型為TriggerCollection 的Triggers屬性，TriggerCollection繼承自:   Collection<TriggerBase>，所以它們都有一個觸發器的集合。

     觸發器可以在xaml中實現樣式的自動變化，或者使用數據綁定，或者觸發某些事件的時候，生成動畫。所以觸發器分為：Trigger、MultiTrigger、DataTrigger、MultiDataTrigger和EventTrigger。

   1. Trigger：根據某一個依賴屬性的變化，用Setter更改某些樣式,

     示例代碼：

  <Style TargetType="Button">
             <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="FontSize" Value="28"></Setter>
                     <Setter Property="BorderBrush" Value="Red"></Setter>
                    <Setter Property="BorderThickness" Value="2"></Setter>
                </Trigger>
            </Style.Triggers>
  </Style>

 當Button的IsPressed的Value為True時，會用Setter完成FontSize，BorderBrush和BorderThickness的設置。

   2. MultiTrigger：只有多個依賴屬性的的變化同時都滿足時，觸發器才會生效。   

      示例代碼：       

 <Style TargetType="Button">
                <Style.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Background" Value="Black"></Condition>
                            <Condition Property="IsPressed" Value="True"></Condition>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="FontSize" Value="28"></Setter>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </Style.Triggers>
 </Style>

    只有當Button的Background為Black並且IsPressed為True時，才會更改Button的Content的FontSize為28.

   3. DataTrigger：可以完成Trigger的所有功能，也可以完成對非依賴屬性的監聽。DataTrigger一共引入了三個參數：Binding，Value和Setters。當需要設置數據觸發器偵聽的數據源時，通過綁定對Binding屬性賦值的方式來完成。

     示例代碼：

public class TestButton : Button {
        public int Index { set; get; }
    }

 <Style TargetType="local:TestButton">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Index}" Value="2">
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
</Style>

   TestButton 的Index屬性是非依賴屬性，用Trigger監聽的時候，是會報錯的。所以要用DataTrigger。

   4. MultiDataTrigger：只有多個屬性的的變化同時都滿足時，觸發器才會生效。 

  示例代碼   

public class TestButton : Button {
        public int Index { set; get; }
        public string Text { set; get; }
    }

   <Style TargetType="local:TestButton">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Index}" Value="2" />
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="HI" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Red" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

     當Index=2，Text=“HI”同時成立時，設置Background為Red。

   5. EventTrigger：事件被觸發時完成一個動畫。

       示例 代碼    

  <Style TargetType="Button">
                   <Style.Triggers>
                      <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Button.Width)"  To="200"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Button.Width)" ></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

當MouseEnter事件被觸發時，Button的Width會慢慢變為200，當MouseLeave事件被觸發時，Button的Width慢慢恢復到最初的大小