欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[WPF 学习] 10.触发器

程序员文章站 2023-03-15 19:22:09
一、属性触发器 要改变的属性值不能再控件里面设置初始值,否则不能触发,如下例的Width 二、数据触发器 相比对属性触发器而言,他可以绑定其他控件的属性或者ViewModel里面的属性 三、事件触发器 1. 只能触发故事板(不知道是否正确) 2. 分为控件触发器和样式触发器(这两个名字自己取的,也不 ......

一、属性触发器
要改变的属性值不能再控件里面设置初始值,否则不能触发,如下例的width

     <rectangle height="100"  fill="black"  name="r1" rendertransformorigin="0.5,0.5">
            <rectangle.rendertransform>
                <rotatetransform></rotatetransform>
            </rectangle.rendertransform>
            <rectangle.style>
                <style targettype="rectangle">
                    <setter property="width" value="100"></setter>
                    <style.triggers>
                        <trigger property="fill" value="black">
                            <trigger.enteractions>
                                <beginstoryboard>
                                    <storyboard repeatbehavior="forever" >
                                        <doubleanimation storyboard.targetproperty="height" from="100" to="200" duration="0:0:1"></doubleanimation>
                                        <doubleanimation storyboard.targetproperty="(rectangle.rendertransform).(rotatetransform.angle)" from="0" to="360" duration="0:0:1"></doubleanimation>
                                    </storyboard>
                                </beginstoryboard>
                            </trigger.enteractions>
                            <setter property="width" value="200"></setter>
                        </trigger>
                    </style.triggers>
                </style>
            </rectangle.style>
        </rectangle>

二、数据触发器
相比对属性触发器而言,他可以绑定其他控件的属性或者viewmodel里面的属性

        <rectangle  width="200" name="r2" fill="green" rendertransformorigin="0.5,0.5">
            <rectangle.rendertransform >
                <rotatetransform x:name="r2rt" angle="0"></rotatetransform>
            </rectangle.rendertransform>
            <rectangle.style>
                <style targettype="rectangle">
                    <setter property="height" value="100"></setter>
                    <style.triggers>
                        <datatrigger binding="{binding elementname=r1,path=fill}" value="black">
                            <setter property="height" value="200"></setter>
                            <datatrigger.enteractions>
                                <beginstoryboard>
                                    <storyboard repeatbehavior="forever" >
                                        <doubleanimation storyboard.targetproperty="(rectangle.rendertransform).(rotatetransform.angle)" from="0" to="360" duration="0:0:1"></doubleanimation>
                                    </storyboard>
                                </beginstoryboard>
                            </datatrigger.enteractions>
                        </datatrigger>
                    </style.triggers>
                </style>
            </rectangle.style>

        </rectangle>

三、事件触发器

  1. 只能触发故事板(不知道是否正确)
  2. 分为控件触发器和样式触发器(这两个名字自己取的,也不知道有没有官方说法)
    控件触发器( storyboard.targetname似乎专为它服务)
     <rectangle width="200" height="200" name="r3" rendertransformorigin="0.5,0.5" fill="yellow">
            <rectangle.rendertransform>
                <rotatetransform x:name="r3rt"></rotatetransform>
            </rectangle.rendertransform>
            
            <rectangle.triggers>
                <eventtrigger routedevent="mouse.mouseenter">
                    <beginstoryboard>
                        <storyboard>
                            <doubleanimation storyboard.targetname="r2rt" storyboard.targetproperty="angle" from="0" to="360" repeatbehavior="forever" duration="0:0:1"></doubleanimation>
                            <doubleanimation storyboard.targetname="r3rt" storyboard.targetproperty="angle" from="0" to="360" repeatbehavior="forever" duration="0:0:1"></doubleanimation>
                        </storyboard>
                    </beginstoryboard>
                </eventtrigger>
            </rectangle.triggers>
        </rectangle>

样式触发器

        <rectangle width="200" height="200" name="r4" rendertransformorigin="0.5,0.5" fill="yellow">
            <rectangle.rendertransform>
                <rotatetransform x:name="r4rt"></rotatetransform>
            </rectangle.rendertransform>
            <rectangle.style>
                <style targettype="rectangle">
                    <style.triggers>
                        <eventtrigger routedevent="mouse.mouseenter">
                            <eventtrigger.actions>
                                <beginstoryboard>
                                    <storyboard>
                                        <doubleanimation storyboard.targetproperty="(rectangle.rendertransform).(rotatetransform.angle)" from="0" to="360" repeatbehavior="forever" duration="0:0:1"></doubleanimation>
                                    </storyboard>
                                </beginstoryboard>
                            </eventtrigger.actions>
                        </eventtrigger>
                    </style.triggers>
                </style>
            </rectangle.style>
        </rectangle>