WPF之触发器

1. trigger

触发器，应用属性值或有条件地执行操作；
1）触发源：控件；
2）触发条件：某属性为某个值，或执行某个事件时；
3）执行操作：更改某个属性值或执行某个事件；
4）举例：当窗口加载时（执行某个事件时），以动画的形式将窗口的大小倍数从 0 到 1 展示（执行某个事件）。

 

2. trigger 的分类

1）根据触发器的触发条件，在 wpf 中，触发器的形态可以是：trigger、datatrigger、eventtrigger；
2）以及由 trigger 延伸的 multitrigger 和由 datatrigger 延伸的 multidatatrigger；

2.1 trigger

trigger 主要用于监测依赖项属性的变化，然后使用设置器改变样式

 

// 例子1：
<button foreground="red" width="350" content="效果">
    <button.style>
        <style targettype="{x:type button}">
            <setter property="height" value="200"/>
            <style.triggers>
                <!--触发条件：当焦点属性的值为 true 时-->
                <trigger property="isfocused" value="true">
                    <!--使用设置器更改样式-->
                    <setter property="height" value="300"/>
                </trigger>
            </style.triggers>
        </style>
    </button.style>
</button>

// 例子2：
<button  foreground="red" width="350" content="效果">
    <button.style>
        <style targettype="{x:type button}">
            <style.triggers>
                <trigger property="isfocused" value="true">
                    <setter property="background" value="blue"></setter>
                    <trigger.enteractions>
                        <!--启动动画并将动画分发给目标对象和属性-->
                        <beginstoryboard>
                            <storyboard>
                                <doubleanimation storyboard.targetproperty="width" 
                                    to="500" duration="0:0:4"/>
                            </storyboard>
                        </beginstoryboard>
                    </trigger.enteractions>
                </trigger>                            
            </style.triggers>
        </style>
    </button.style>
</button>

2.2 datatrigger

跟 trigger类似，只是它可以绑定到任意数据的变化

<button  foreground="red" width="350" content="效果">
    <button.style>
        <style targettype="{x:type button}">
            <style.triggers>
                <!--触发条件：当 name 值为 bt 的控件的焦点属性值为 true 时-->
                <datatrigger binding="{binding isfocused, elementname=bt}" value="true">
                    <setter property="background" value="blue"></setter>
                    <datatrigger.enteractions>
                        <!--同样的，启动动画并将动画分发给目标对象和属性-->
                        <beginstoryboard>
                            <storyboard>
                                <doubleanimation storyboard.targetproperty="width" 
                                    from="100" to="500" duration="0:0:4"/>
                            </storyboard>
                        </beginstoryboard>
                    </datatrigger.enteractions>
                </datatrigger>                            
            </style.triggers>
        </style>
    </button.style>
</button>

2.3 eventtrigger

表示应用设置事件以响应操作的触发器，窗口加载时执行动画就是用 eventtrigger 实现的；

<button>
    <button.style>
        <style targettype="{x:type button}">
            <style.triggers>
                <!--事件触发器：当 window 加载时，触发-->
                <eventtrigger routedevent="window.loaded">
                    <eventtrigger.actions>
                        <!--同样的，启动动画并将动画分发给目标对象和属性-->
                        <beginstoryboard>
                            <storyboard>
                                <doubleanimation storyboard.targetproperty="width" from="0" to="100" duration="0:0:0.2"/>
                            </storyboard>
                        </beginstoryboard>
                    </eventtrigger.actions>
                </eventtrigger>
            </style.triggers>
        </style>
    </button.style>
</button>

2.4 multitrigger

trigger 类似。联合了多个条件，只有满足了所有这些条件，才会启动触发器。

<button>
    <button.style>
        <style targettype="{x:type button}">
            <style.triggers>
                <multitrigger>
                    <!--当 content、ismouseover 这两个属性为设置的值时，才会触发该触发器-->
                    <multitrigger.conditions>
                        <condition property="content" value="效果"></condition>
                        <condition property="ismouseover" value="true"></condition>
                    </multitrigger.conditions>
                    <multitrigger.setters>
                        <setter property="foreground" value="red"></setter>
                    </multitrigger.setters>
                </multitrigger>
            <style.triggers>
        <style targettype="{x:type button}">
    <button.style>
<button>

multidatatrigger 可以参考 datatrigger 和 multitrigger 即可。

..

2.5 补充

1）style.triggers 跟 control.triggers 的区别：

像上面，可以往 style.trigger 里添加 trigger、datatrigger、eventtrigger，
但只能往控件里面的 triggers 添加 eventtrigger：

<button>
    <button.triggers>
        <eventtrigger routedevent="window.loaded">
            <eventtrigger.actions>
                <beginstoryboard>
                    <storyboard>
                        <doubleanimation storyboard.targetproperty="width" from="0" to="100" duration="0:0:0.2"/>
                    </storyboard>
                </beginstoryboard>
            </eventtrigger.actions>
        </eventtrigger>
    </button.triggers>
</button>

2）触发器设置样式无效，可能原因：

在控件标签中，已对控件设置过该属性的值。
具体解释：

style 是应用样式给控件，它的优先级低于直接对控件操作的设置，例如：

<button width="350" content="效果">
    <button.style>
        <style targettype="{x:type button}">
            <style.triggers>
                <trigger property="isfocused" value="true">
                    <!--button 本身已经对 width 设置过值，这里的触发器不会生效-->
                    <setter property="width" value="100"/>
                </trigger>
            </style.triggers>
        </style>
    </button.style>
</button>

3）trigger 、 datatrigger、eventtrigger 负责<触发器执行>的属性

trigger 、 datatrigger 可以是 enteractions、exitactions，

enteractions 是触发对象变为活动状态时，通俗来说，就是当该属性的值成为你设置的值时，开始触发器执行，强调的是成为的瞬间；
而 exitactions 是反过来，当触发对象变为非活动状态时，即当该属性的值从你设置的值到别的值，这个瞬间，开始触发器执行。

而 eventtrigger 的是 actions，它的时机在发生事件时。

这个可以根据他们的触发条件，慢慢体会体会，先学会用。

原文：