WPF 杂谈——Trigger触发器

Posted 2020-09-26 落叶随风

笔者在使用的WPF过程中，见过的触发器有三种：Trigger、DataTrigger、EventTrigger。其中最为常用的要属Trigger。至于触发器的作用就是当某个属性的值发生变化，应该去做某事。当然这是笔者自身的理解。比较简单。那么这三者之间有什么不同呢？这便是这章要讨论的目地。WPF的Style笔者喜欢把他看作CSS的样式。那么Trigger触发器你们可以理解为CSS样式中类似于:hover 伪类。这样子笔者做一个列子吧。如下，当鼠标移动在文本上面的，前景色变成为红色。

<Grid>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
</Grid>

执行结果

鼠标移在上面

相信从上面的例子你至少可以明白触发器的作用。而且作用还不小呢？好了。这一点笔者就不需要在重复的去讲解了。那么DataTrigger又跟Trigger有什么区别呢？可以说作用上来讲没有什么区别，但是在面向对象却是不一样子的。Trigger都是专对于控件自身的依赖属性(dependency properties)。DataTrigger是一般专对于另的控件的属性，而且都是用绑定来实现的。如下面的例子。

    <Grid>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>

那么例子的效果跟上一例子一样子。代码上面也没有多大的差别。主要是修改了触发器的写法而以。但是我们要认识到一点：Trigger一般都是跟属性直接关联。而DataTrigger是通过绑定来关联。所以DataTrigger一般用于写另一个控件上的属性在当前控件的触发效果。当然也可以绑定自身，如上。那么在举一个绑定另一个控件的属性吧。如下

<StackPanel Orientation="Vertical">
        <ToggleButton Name="Changer" Content="变红" Width="75" Height="30"></ToggleButton>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName= Changer}" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>

执行结果：

最后一个Eventtrigger一般用于动画效果的处理。上面俩个触发器作用对象都是属性。而这个却是作用于事件的。表示当前某个事件发生后要触发。笔者自己写例子太麻烦了。就到国外复制一个例子过来说明。如下

    <StackPanel Orientation="Vertical">
        <TextBlock Text="I am Aomi" HorizontalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>

例子的功能很简单就是当鼠标进入到文字区域的时候文字变大到28字体。如果离开就变成18字体。

执行效果：

上面的触发器应该来讲算是比较简单而又常用。可是都是单个触发条件。我们在编写业务代码的时候，往往可以存在多个条件下的触发效果。所以上面的Trigger和DataTrigger就不能满足需求了。为了这种情况，WPF为Trigger提供了MultiTrigger，为DataTrigger提供了MultiDataTrigger。除了语法上有一定的区别以外，效果是一样子的。如下

 <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="#4d4d4d" />
                        </MultiTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

从上面我们可以看到Condition就是多条件。用法用单条件是一样子的。

执行效果：

最后让我们看一下MultiDataTrigger的用法吧。如下

<TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsChecked,ElementName=Changer  }" Value="True" />
                                <Condition Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Self} }" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Foreground" Value="Red" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

执行效果：