Triggers — 触发响应

一、`Triggers` 触发响应

Triggers 让控件对指定的设置具有响应，如下的3种类型都具有triggers collection：
- Style：设置控件的样式，对应为Style.Triggers
- ControlTemplate：设置控件的模板（可将其设置在Style内部），对应为ControlTemplate.Triggers
- DataTemplate：数据模板，对应为DataTemplate.Triggers
Triggers 主要作为Style和ControlTemplate的一个属性来进行设置，该属性的类型为TriggerCollection，它是抽象类TriggerBase的一个集合。
Triggers 共有5种触发类型，如下图所示：

二、以`Style.Triggers` 触发类型为例，其它两种类似

Trigger类型
- Property只能为属性值，不能为事件
- Value设置具体的值
- Setter 当满足该属性值时触发项内容

    <Style x:Key="BtnStyle01" TargetType="{x:Type Button}"><Style.Triggers><Trigger Property="IsPressed" Value="True"><Setter Property="FontStyle" Value="Italic"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="Red"/></Trigger></Style.Triggers></Style>

MultiTrigger类型
- Conditions：为设置的条件属性，在此为满足设置的多个条件就可以触发对应的设置。
- 当Button的字体和字形都满足条件时，字体就会变成红色

    <Style x:Key="BtnStyle02" TargetType="Button"><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="FontSize" Value="20"/><Condition Property="FontFamily" Value="Times New Roman"/></MultiTrigger.Conditions><Setter Property="Foreground" Value="Red"/></MultiTrigger></Style.Triggers></Style>

EventTrigger类型
- RoutedEvent 为主要的属性，用来设置触发的具体事件，其值只能为事件类型
- Actions 为接下来为具体的响应事件，一般为动画

    <Style x:Key="BtnStyle03" TargetType="Button"><Style.Triggers><EventTrigger RoutedEvent="Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="FontSize" From="10" To="40" Duration="0:0:2" RepeatBehavior="3x" FillBehavior="Stop"/></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.2"Duration="0:0:2" AutoReverse="True" RepeatBehavior="3x" FillBehavior="Stop"/></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style>

DataTrigger类型和MultiDataTrigger类型
- 当绑定的数据满足指定条件时，就会触发一些响应
- DataTrigger和MultiDataTrigger的区别在于：满足条件的数量，前者只能设置一个条件，而后者可以设置多个条件。
- 如下，当ListBox绑定的数据中某些属性满足指定的值时，就会以不同的颜色或背景来进行显示：

using System.Collections.ObjectModel;//自定义绑定的数据类型
namespace Pr24_Style.SubItem
{public class MyData{public string CityName { set; get; }public string CurState { set; get; }public MyData(string str1, string str2){CityName = str1;CurState = str2;}}public class PlacesData : ObservableCollection<MyData>{public PlacesData(){Add(new MyData("BeiJing", "On"));Add(new MyData("ShangHai", "Off"));Add(new MyData("GuangZhou", "No"));Add(new MyData("HangZhou", "On"));Add(new MyData("NanJin", "To"));Add(new MyData("Shenzhen", "On"));}}
}

 <!--资源文件--><local:PlacesData x:Key="placesData"/><Style x:Key="lsty" TargetType="ListBoxItem"><Style.Triggers><DataTrigger Binding="{Binding Path=CurState}" Value="On"> <!--当CurState值为On时，会触发响应--><Setter Property="Foreground" Value="Red"/></DataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding Path=CityName}" Value="ShangHai"/><Condition Binding="{Binding Path=CurState}" Value="Off"/></MultiDataTrigger.Conditions><Setter Property="Background" Value="Violet"/></MultiDataTrigger></Style.Triggers></Style><!--设置数据显示的样式--><DataTemplate DataType="{x:Type local:MyData}"><Canvas Width="160" Height="20"><TextBlock Canvas.Left="0" Width="130" FontSize="12" Text="{Binding Path=CityName}"/><TextBlock Canvas.Left="130" Width="30" FontSize="12" Text="{Binding Path=CurState}"/></Canvas></DataTemplate><!--创建ListBox应用实例，来对资源文件进行调用--><ListBox HorizontalAlignment="Center" Width="180" Background="Honeydew"ItemsSource="{Binding Source={StaticResource placesData}}" ItemContainerStyle="{StaticResource lsty}"/>

结果如下：

Triggers — 触发响应相关推荐

Vue响应式原理 vue源码(十一)
前言看过很多讲响应式的文章,大多都是告诉你们,有Observer,Dep,Wathcer类,Object.definePorperty,先会触发get中的dep.depend收集依赖,然后数据改变时 ...
阿里淘宝一直在推的响应式编程到底是个什么鬼？
随着这些年智能手机的发展和普及,我们的服务器端要应对日益增长的巨大流量. 从开发的角度来看,这就要求我们必须设计出高扩展性和高可用性的程序,以确保能够适应日益增长的请求所带来的压力. 而从使用者的角度 ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
响应式编程之一：概述
什么是响应式编程(Reactive Programming) In computing, reactive programming is an asynchronous programming par ...
初始Vue响应式原理～～
自从 Vue 发布以来,就受到了广大开发人员的青睐,提到 Vue,我们首先想到的就是 Vue 的响应式系统,那响应式系统到底是怎么回事呢?接下来我就给大家简单介绍一下 Vue 中的响应式原理. vue ...
理解实时频谱分析仪的频域电平触发
应用指南 74-0070-191120 本应用指南介绍了使用ThinkRF实时频谱分析仪实时捕获信号时所使用的频域电平触发装置,以及其用法.建议和限制. 频域电平触发机制如图1所示,ThinkRF实 ...
Vue3.0源码解读 - 响应式系统
一.目标对象标识 ** 类似于渲染系统,vue3.0的响应式系统也有自己的一套flag,用于标记目标对象target(通常是我们传入的数据源)的一些特性 export const enum React ...
Lit（二）：响应式属性
Lit 组件接收输入并将其状态存储为 JavaScript 类字段或属性.响应式属性是可以在更改时触发响应式更新周期.重新渲染组件以及可选地读取或写入属性的属性. Lit 管理您的反应属性及其相应的属 ...

Triggers — 触发响应

一、`Triggers` 触发响应

二、以`Style.Triggers` 触发类型为例，其它两种类似

Triggers — 触发响应相关推荐

最新文章

热门文章

Triggers — 触发响应

一、Triggers 触发响应

二、以Style.Triggers 触发类型为例，其它两种类似

Triggers — 触发响应相关推荐

最新文章

热门文章

一、`Triggers` 触发响应

二、以`Style.Triggers` 触发类型为例，其它两种类似