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