07 触发器

07 触发器

触发器，是指在既定条件或者特殊场景下被触发，从而去执行一个操作。在WPF中，触发器可以分为以下几类：基本触发器(Trigger)；事件触发器(EventTrigger)；数据触发器(DataTrigger)；多条件触发器(MultiTrigger,MultiDataTrigger)。下面我们来通过代码一一了解。

基本触发器（属性触发器）

根据控件的某个属性是否处于某个值的情况来激活触发器，请看如下代码。该例子将会在鼠标进入按钮时修改按钮的字体为红色22像素。当滑块的值为1时修改背景为蓝色

<Button Content="测试按钮">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Trigger.Setters>
                        <Setter Property="Foreground" Value="red"/>
                        <Setter Property="FontSize" Value="22"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>
<Slider Maximum="5" Minimum="0">
    <Slider.Style>
        <Style TargetType="Slider">
            <Style.Triggers>
                <Trigger Property="Value" Value="1">
                    <Trigger.Setters>
                        <Setter Property="Background" Value="Blue"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Slider.Style>
</Slider>

如果有多个元素都需要添加类似的触发器，可以使用上一章节讲述的知识点将Style放在资源中，如下

<Window.Resources>
    <Style TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Trigger.Setters>
                    <Setter Property="Foreground" Value="red"/>
                    <Setter Property="FontSize" Value="22"/>
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="Slider">
        <Style.Triggers>
            <Trigger Property="Value" Value="1">
                <Trigger.Setters>
                    <Setter Property="Background" Value="Blue"/>
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="测试按钮"/>
    <Slider Maximum="5" Minimum="0"/>
</StackPanel>

​Trigger​控件的属性可以是控件的所有属性，如：Content、Value、IsMouseOver、IsMouseCaptured。。。

如果我们想监视多个属性的值来控制触发器，可以使用MultiTrigger​，需要将多个触发条件写在MultiTrigger.Conditions中，其它用法都是一致的

<Style TargetType="Slider">
    <Style.Triggers>
        <!--多属性触发器-->
        <MultiTrigger>
            <!--这里面写触发器激活的条件-->
            <MultiTrigger.Conditions>
                <Condition Property="Value" Value="1"/>
                <Condition Property="Orientation" Value="Vertical"/>
            </MultiTrigger.Conditions>
            <!--这里写触发器激活时应用的样式-->
            <MultiTrigger.Setters>
                <Setter Property="Background" Value="Blue"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

事件触发器

事件触发器有些不同的是，它触发执行的是一段动画，并且是通过RoutedEvent来执行要监视的事件

<Style TargetType="Button">
    <Setter Property="Width" Value="400"/>
    <Style.Triggers>
        <!--事件触发器，当鼠标移入事件触发时触发器被激活-->
        <EventTrigger RoutedEvent="MouseEnter">
            <!--设置事件触发器的Actions属性-->
            <EventTrigger.Actions>
                <!--Actions的属性一般是一个故事板-->
                <BeginStoryboard>
                    <!--故事板的描述设置-->
                    <Storyboard>
                        <!--双精度浮点数的动画，该标签表示要设置控件的Width属性到200，用时300ms-->
                        <DoubleAnimation To="200" Storyboard.TargetProperty="Width" Duration="0:0:0.300"/>
                        <ColorAnimation To="Red" Storyboard.TargetProperty="Foreground.Color" Duration="0:0:0.300"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="400" Storyboard.TargetProperty="Width" Duration="0:0:0.300"/>
                        <ColorAnimation To="Black" Storyboard.TargetProperty="Foreground.Color" Duration="0:0:0.300"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

可以使用该触发器给窗体加上入场动画

<Window.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <BeginStoryboard >
            <Storyboard>
                <DoubleAnimation From="0" To="1" Duration="0:0:0.500" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>

数据触发器

数据触发器通过监控绑定到触发器上的数据值来决定是否激活触发器

<Style TargetType="Button">
    <Style.Triggers>
        <!-- 绑定数据到   s  元素上，绑定的属性为Value，目标值为3时激活 -->
        <DataTrigger Binding="{Binding Value, ElementName=s}" Value="3">
            <DataTrigger.Setters>
                <Setter Property="Foreground" Value="Red"/>
            </DataTrigger.Setters>
        </DataTrigger>
    </Style.Triggers>
</Style>

还有多数据触发器

<Style TargetType="Button">
    <Style.Triggers>
        <MultiDataTrigger>
            <!-- 当两个控件的Value属性值都为3时激活触发器 -->
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Value, ElementName=s1}" Value="3"/>
                <Condition Binding="{Binding Path=Value, ElementName=s2}" Value="3"/>
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.Setters>
                <Setter Property="Foreground" Value="Red"/>
            </MultiDataTrigger.Setters>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>