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慢慢恢复到最初的大小