在 WPF 中,触发器(Trigger)是样式体系的核心扩展,它通过 "条件 - 响应" 机制实现 UI 的动态交互 ------ 当预设条件(如属性变化、数据更新、事件触发)满足时,自动执行样式修改、动画播放等响应操作,无需手动编写大量后台逻辑。
一、触发器的核心概念
-
本质:样式(Style)或模板(ControlTemplate/DataTemplate)的子元素,用于实现 "条件驱动的 UI 变化"。
-
核心逻辑:
满足条件 → 执行响应-
条件:通常是依赖属性值变化、数据对象属性变化或特定事件触发。
-
响应:修改控件属性(如背景色、字体)、播放动画、显示隐藏元素等。
-
-
触发条件特征 :常用以
Is开头的依赖属性(如IsMouseOver、IsFocused),这类属性天然表示 "状态切换",是触发器的核心判断依据。
二、5 种触发器种类及实战示例
WPF 的 5 种触发器针对不同场景设计,核心区别在于 "触发条件的类型"(属性 / 多属性 / 数据 / 多数据 / 事件),以下结合示例说明用法。
1. 普通触发器(Trigger)
-
作用 :监测单个依赖属性的状态变化,满足条件时执行响应。
-
适用场景:单个控件状态切换(如鼠标悬浮、获取焦点)。
-
关键属性 :
Property(监测的依赖属性)、Value(触发条件的属性值)、Setters(满足条件后执行的属性修改)。
示例:鼠标悬浮时修改按钮样式
<Style TargetType="Button">
<!-- 默认样式 -->
<Setter Property="Background" Value="#3498db"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="10,5"/>
<!-- 普通触发器:监测IsMouseOver属性 -->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- 满足条件(鼠标悬浮)时修改样式 -->
<Setter Property="Background" Value="#2980b9"/>
<Setter Property="Cursor" Value="Hand"/> <!-- 鼠标变手型 -->
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!-- 补充:获取焦点时修改边框色 -->
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="#e74c3c"/>
</Trigger>
</Style.Triggers>
</Style>
2. 多条件触发器(MultiTrigger)
-
作用 :监测多个依赖属性 的状态,所有条件同时满足时才执行响应(逻辑 "与")。
-
适用场景:需要多个状态共同触发的场景(如 "文本框有焦点且内容为空" 时提示错误)。
-
关键属性 :
Conditions(多个条件的集合,每个条件对应一个依赖属性 + 值)、Setters(响应操作)。
示例:文本框 "有焦点且为空" 时显示红色边框
<Style TargetType="TextBox">
<!-- 默认样式 -->
<Setter Property="BorderBrush" Value="#bdc3c7"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="5"/>
<!-- 多条件触发器:同时满足IsFocused=True和Text="" -->
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
<Condition Property="Text" Value=""/> <!-- 文本为空 -->
</MultiTrigger.Conditions>
<!-- 满足条件时的响应 -->
<Setter Property="BorderBrush" Value="#e74c3c"/> <!-- 红色边框 -->
<Setter Property="ToolTip" Value="内容不能为空!"/> <!-- 提示 tooltip -->
</MultiTrigger>
</Style.Triggers>
</Style>
3. 数据触发器(DataTrigger)
-
作用 :监测数据对象的属性(非控件自身的依赖属性)变化,满足条件时执行响应。
-
适用场景:UI 与数据绑定联动(如 "订单状态为已取消时显示红色文本")。
-
关键属性 :
Binding(绑定的数据对象属性)、Value(触发条件的属性值)、Setters(响应操作)。 -
注意 :需先为控件设置
DataContext(绑定的数据源)。
示例:根据订单状态显示不同文本颜色
假设存在数据模型Order,包含属性Status(值为 "已完成""已取消""待支付"):
// 数据模型
public class Order
{
public string Status { get; set; } // 订单状态
public decimal Amount { get; set; } // 订单金额
}
// 后台设置DataContext
public MainWindow()
{
InitializeComponent();
this.DataContext = new Order { Status = "已取消", Amount = 199.9m };
}
XAML 中使用 DataTrigger:
<TextBlock
Text="{Binding Path=Status, StringFormat='订单状态:{0}'}"
FontSize="14"
Margin="5"/>
<TextBlock
Text="{Binding Path=Amount, StringFormat='订单金额:{0:C}'}"
FontSize="14"
Margin="5">
<TextBlock.Style>
<Style TargetType="TextBlock">
<!-- 数据触发器:根据Status值修改金额颜色 -->
<Style.Triggers>
<!-- 状态为“已取消”时显示红色 -->
<DataTrigger Binding="{Binding Status}" Value="已取消">
<Setter Property="Foreground" Value="#e74c3c"/>
</DataTrigger>
<!-- 状态为“已完成”时显示绿色 -->
<DataTrigger Binding="{Binding Status}" Value="已完成">
<Setter Property="Foreground" Value="#2ecc71"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
4. 多条件数据触发器(MultiDataTrigger)
-
作用 :监测多个数据对象的属性 ,所有条件同时满足时执行响应(逻辑 "与")。
-
适用场景:多数据状态联动(如 "订单金额> 1000 且状态为待支付时,显示'优先处理'标签")。
-
关键属性 :
Conditions(多个数据绑定条件的集合)、Setters(响应操作)。
示例:订单 "金额> 1000 且待支付" 时显示标签
基于上述Order模型,添加 "优先处理" 标签的显示逻辑:
<StackPanel Margin="5">
<TextBlock Text="{Binding Status}" FontSize="14"/>
<TextBlock Text="{Binding Amount, StringFormat='金额:{0:C}'}" FontSize="14"/>
<!-- 多条件数据触发器:控制“优先处理”标签的可见性 -->
<TextBlock Text="【优先处理】" Foreground="#f39c12" FontWeight="Bold">
<TextBlock.Style>
<Style TargetType="TextBlock">
<!-- 默认隐藏 -->
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<!-- 条件1:金额>1000 -->
<Condition Binding="{Binding Amount}" Value="1000" Comparison="GreaterThan"/>
<!-- 条件2:状态为“待支付” -->
<Condition Binding="{Binding Status}" Value="待支付"/>
</MultiDataTrigger.Conditions>
<!-- 满足条件时显示标签 -->
<Setter Property="Visibility" Value="Visible"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
5. 事件触发器(EventTrigger)
-
作用 :监测特定路由事件 (如
Click、Loaded、MouseDown),事件触发时执行响应(通常是动画)。 -
适用场景:事件驱动的动态效果(如点击按钮时播放缩放动画、页面加载时播放淡入效果)。
-
关键属性 :
RoutedEvent(监测的路由事件)、Actions(事件触发后执行的操作,常用BeginStoryboard播放动画)。
示例:点击按钮时播放 "缩放 + 透明度" 动画
<Style TargetType="Button">
<Setter Property="Background" Value="#9b59b6"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="10,5"/>
<Style.Triggers>
<!-- 事件触发器:监测Click事件 -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- 动画1:缩放(点击时缩小,之后恢复) -->
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1" To="0.9" Duration="0:0:0.1"
AutoReverse="True"/> <!-- AutoReverse:动画结束后反向恢复 -->
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1" To="0.9" Duration="0:0:0.1"
AutoReverse="True"/>
<!-- 动画2:透明度变化 -->
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1" To="0.7" Duration="0:0:0.1"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
三、触发器核心区别与适用场景总结
| 触发器类型 | 触发条件类型 | 核心逻辑 | 适用场景举例 |
|---|---|---|---|
| Trigger | 单个依赖属性 | 单条件满足 | 鼠标悬浮、获取焦点 |
| MultiTrigger | 多个依赖属性(同时满足) | 多条件 "与" | 文本框有焦点且为空 |
| DataTrigger | 单个数据对象属性 | 数据状态变化 | 订单状态为 "已取消" 时变色 |
| MultiDataTrigger | 多个数据对象属性(同时满足) | 多数据 "与" | 金额 > 1000 且待支付时显示标签 |
| EventTrigger | 路由事件 | 事件触发 | 点击按钮播放动画、页面加载淡入 |
通过合理选择触发器类型,可以高效实现 WPF UI 的动态交互,减少后台代码量,同时保证样式与逻辑的解耦,提升代码可维护性。