WPF 触发器 Trigger
触发器 Trigger
触发器(Trigger)是 WPF 中的一种机制:
当某个条件满足时,自动改变控件的某些属性,比如颜色、大小、透明度等。
换句话说,就是"如果……那么就……" 的一种规则。
常见触发器类型:
类型 | 说明 |
---|---|
Trigger | 依赖属性变化时触发 |
DataTrigger | 绑定的数据变化时触发 |
EventTrigger | 事件发生时触发 |
MultiTrigger | 多个条件同时满足时触发 |
MultiDataTrigger | 多个数据条件同时满足时触发 |
1. Trigger
—— 属性值触发(最基础)
例如,当按钮被鼠标悬停(IsMouseOver = true
)时,改变背景色:
<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
—— 数据变化触发
当绑定的数据满足某条件时,触发样式改变。
例子:如果按钮绑定的某个值是 "危险"
,就变成红色。
<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
事件),让按钮慢慢变大:
<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 ) |
- RoutedEvent:必填!指定要监听哪个路由事件。
<!--当按钮被点击时触发。-->
<EventTrigger RoutedEvent="Button.Click">
-
SourceName:(可选)指定事件来源控件的名字
-
如果要监听的事件是来自模板中另一个控件,需要指定它的
x:Name
。 -
通常用在
ControlTemplate
或DataTemplate
内。
-
<!--监听名为 `InnerBorder` 的元素的鼠标进入事件。-->
<EventTrigger RoutedEvent="MouseEnter" SourceName="InnerBorder">
- Actions:当事件发生时执行的动作。
BeginStoryboard
:开始一个动画StopStoryboard
:停止一个动画PauseStoryboard
:暂停动画ResumeStoryboard
:恢复动画
<!--当事件触发时,执行透明度变化动画。-->
<BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.3"/></Storyboard>
</BeginStoryboard>
4. MultiTrigger
—— 多属性同时满足触发
例子:按钮被禁用(IsEnabled = False
)且鼠标悬停时,背景变灰:
<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 让触发更有动效 | 比如渐变色、放大缩小动画 |