WPF 触发器 Trigger

触发器 Trigger

触发器(Trigger)是 WPF 中的一种机制:

当某个条件满足时,自动改变控件的某些属性,比如颜色、大小、透明度等。

换句话说,就是"如果......那么就......" 的一种规则。

常见触发器类型:

类型 说明
Trigger 依赖属性变化时触发
DataTrigger 绑定的数据变化时触发
EventTrigger 事件发生时触发
MultiTrigger 多个条件同时满足时触发
MultiDataTrigger 多个数据条件同时满足时触发

1. Trigger ------ 属性值触发(最基础)

例如,当按钮被鼠标悬停(IsMouseOver = true)时,改变背景色:

xml 复制代码
<Button Content="鼠标悬停变色">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True"> <!--Is... 触发条件-->
                    <Setter Property="Background" Value="LightGreen"/>
                    <Setter Property="Foreground" Value="DarkBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

✅ 效果:鼠标悬停到按钮上时,按钮背景变绿、文字变蓝。

相关属性:

属性 / 子元素 类型 说明
Property DependencyProperty 触发器监听的属性(比如 IsMouseOver
Value object Property 的值等于这个 Value 时触发
Setters 集合(Setter 满足条件后要应用的一组属性修改(比如改颜色、改大小)
EnterActions 集合(TriggerAction 当进入触发状态时执行的动作(比如动画)
ExitActions 集合(TriggerAction 当离开触发状态时执行的动作

常用条件:

属性触发器(PropertyTrigger)常用条件:

属性名 说明
IsMouseOver 鼠标悬停在控件上时为 True
IsPressed 按钮等控件被按下时为 True
IsEnabled 控件是否启用(禁用时为 False
IsFocused 控件是否获得焦点(获取为 True)
IsChecked 复选框(CheckBox)、单选按钮(RadioButton)是否选中
IsSelected 列表项(ListBoxItem、TabItem等)是否被选中
Visibility 控件是否可见(Visible / Hidden / Collapsed)
IsReadOnly 文本框(TextBox)是否只读
Orientation StackPanel等控件的方向(Horizontal / Vertical)

2. DataTrigger ------ 数据变化触发

当绑定的数据满足某条件时,触发样式改变。

例子:如果按钮绑定的某个值是 "危险",就变成红色。

xml 复制代码
<Button Content="按钮" Tag="危险">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="危险">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Tag 属性是 "危险" 时,按钮背景变红。

常用条件

DataTrigger 用于根据绑定到的数据(DataContext)变化触发,比如:

绑定属性 说明
自定义属性值 比如某个 ViewModel 中的 Status == "完成"
布尔型标志 比如 IsLoading == true
数值型、字符串型比较 比如 Level > 5(需要结合 Converter 实现)

3. EventTrigger ------ 事件发生时触发动作(一般配合动画)

例子:当按钮加载完毕(Loaded 事件),让按钮慢慢变大:

xml 复制代码
<Button Content="加载放大按钮">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard> <!--动画-->
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width"
                                     From="100" To="200" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

✅ 效果:按钮出现后,2秒内宽度从100变到200。

主要属性

属性 / 子元素 类型 说明
RoutedEvent RoutedEvent 类型 要监听的事件(比如 Button.ClickEvent
SourceName string(可选) 指定事件来源控件的名字(通常用于模板中)
Actions 集合(TriggerAction 事件触发时要执行的动作,通常是开始动画(BeginStoryboard
  1. RoutedEvent:必填!指定要监听哪个路由事件。
xml 复制代码
<!--当按钮被点击时触发。-->
<EventTrigger RoutedEvent="Button.Click">
  1. SourceName:(可选)指定事件来源控件的名字

    • 如果要监听的事件是来自模板中另一个控件,需要指定它的 x:Name

    • 通常用在 ControlTemplateDataTemplate 内。

xml 复制代码
<!--监听名为 `InnerBorder` 的元素的鼠标进入事件。-->
<EventTrigger RoutedEvent="MouseEnter" SourceName="InnerBorder">
  1. Actions:当事件发生时执行的动作。
    • BeginStoryboard:开始一个动画
    • StopStoryboard:停止一个动画
    • PauseStoryboard:暂停动画
    • ResumeStoryboard:恢复动画
xml 复制代码
<!--当事件触发时,执行透明度变化动画。-->
<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.3"/>
    </Storyboard>
</BeginStoryboard>

4. MultiTrigger ------ 多属性同时满足触发

例子:按钮被禁用(IsEnabled = False)且鼠标悬停时,背景变灰:

xml 复制代码
<Button Content="多条件触发按钮" IsEnabled="False">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True"/>
                        <Condition Property="IsEnabled" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="Gray"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

✅ 效果:按钮同时满足两种状态,才改变样式。

相关属性

属性/子元素 类型 说明
Conditions 集合(Condition 定义多个条件,必须全部同时满足才触发
Setters 集合(Setter 满足条件后要改变的属性
EnterActions(可选) 集合(TriggerAction 进入触发状态时执行的动作(如动画)
ExitActions(可选) 集合(TriggerAction 离开触发状态时执行的动作
使用小技巧 说明
尽量用 Style 包裹触发器 让界面更整洁、好维护
配合 ControlTemplate 自定义控件外观时,触发器更强大
Storyboard 让触发更有动效 比如渐变色、放大缩小动画
相关推荐
界面开发小八哥3 小时前
界面组件DevExpress WPF中文教程:Grid - 如何过滤节点?
.net·wpf·界面控件·devexpress·ui开发
I'mSQL3 小时前
C#与WPF使用mvvm简单案例点击按钮触发弹窗
开发语言·c#·wpf
百锦再1 天前
WPF依赖属性深度解析:从原理到高级应用
wpf·依赖·绑定·验证·net·强制
✎ ﹏梦醒͜ღ҉繁华落℘1 天前
WPF高级学习(一)
学习·wpf
界面开发小八哥1 天前
界面控件DevExpress WPF v25.1新版亮点:模板库更新升级
ui·.net·wpf·界面控件·devexpress·ui开发
△曉風殘月〆1 天前
WPF MVVM进阶系列教程(二、数据验证)
wpf·mvvm
JosieBook2 天前
【开源】WpfMap:一个基于WPF(Windows Presentation Foundation)技术构建的数据可视化大屏展示页面
信息可视化·wpf
bianguanyue2 天前
WPF——自定义ListBox
c#·wpf
大曰编程2 天前
行为型模式-协作与交互机制
wpf·交互
上元星如雨4 天前
WPF 项目设置应用程序图标和设置程序集图标
wpf