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

 

    

作者:绿茶叶 
出处:http://www.cnblogs.com/greenteaone/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值