样式(Style)和触发器

Posted X·3

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式(Style)和触发器相关的知识,希望对你有一定的参考价值。

样式(Style)和触发器

        样式(Style)是组织和重用格式化选项的重要工具。样式封装了一系列属性设置细节;触发器,顾名思义, 触发器可以理解为, 当达到了触发的条件, 那么就执行预期内的响应, 可以是样式、数据变化、动画等。触发器,从某种意义上来说它也是一种Style,因为它包含有一个Setter集合,并根据一个或多个条件执行Setter中的属性改变。

一、样式(Style)

WPF中的各类控件元素, 都可以自由的设置其样式,而样式则是组织和重用格式化选项的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。然而, WPF样式的功能更加强大, 如控件的行为。WPF的样式还支持触发器。

1.常见的样式类型

  • 字体(FontFamily)
  • 字体大小(FontSize)
  • 背景颜色(Background)
  • 字体颜色(Foreground)
  • 边距(Margin)
  • 水平位置(HorizontalAlignment)
  • 垂直位置(VerticalAlignment) 等等

2. 示例

运行结果:

 

上面有讲到, 样式是组织和重用的工具。 而上面的代码, 由于每个元素都是相同的, 但是每个元素XAML都重复定义。 下面将介绍通过样式如何优化上面的代码。

第一步: 在Resources目录下定义一个TextBlockStyle的样式, 完整代码如下:

第二步:通过控件的Style属性 来引用x:key 的样式, 代码如下:

 

注意: 当控件引用了某个样式, 在控件本身并没有定义该属性的情况下,优先使用样式中的定义,否则优先控件本身的定义。如下所示, 样式中设置了颜色为 Red, 但是控件本身又设置了Green, 那么控件的最终效果 Green。例如:

 

二、触发器(Trigger)

       触发器,顾名思义, 触发器可以理解为, 当达到了触发的条件, 那么就执行预期内的响应, 可以是样式、数据变化、动画等。触发器通过 Style.Triggers集合连接到样式中, 每个样式都可以有任意多个触发器, 并且每个触发器都是 System.Windows.TriggerBase的派生类实例。

1.常用类型

  • Trigger : 监测依赖属性的变化、触发器生效
  • MultiTrigger : 通过多个条件的设置、达到满足条件、触发器生效
  • DataTrigger : 通过数据的变化、触发器生效
  • MultiDataTrigger : 多个数据条件的触发器
  • EventTrigger : 事件触发器, 触发了某类事件时, 触发器生效。

2.示例

2.1 Trigger触发器

下面以Border为例, 演示一个简单的Trigger触发器。

当鼠标进入Border的范围, 改变Border的背景颜色和边框颜色, 当鼠标离开Border的范围, 还原Border的颜色。

代码如下所示:

运行效果:

 

2.2 MultiTrigger触发器

和Trigger类似, MultiTrigger可以设置多个条件满足时, 触发, 下面以TextBox为例, 做一个简单的Demo

当鼠标进入文本框的范围, 并且光标设置到TextBox上, 则把TextBox的背景颜色改变成Red。代码示例如下:

运行效果:

2.3 EventTrigger触发器

事件触发器,当触发了某类事件,触发器执行响应。

下面用实例演示,为了能直观感受到这类触发器的作用,用动画演示其功能,下面使用了动画相关的知识,在学习到后面几个章节,读者可以进行相关的内容学习。

  • 当鼠标进入按钮的范围中, 在0.02秒内, 把按钮的字体变成18号
  • 当鼠标离开按钮的范围时, 在0.02秒内, 把按钮的字体变成13号

代码及效果如下所示:

运行效果:

 

2.4 DataTrigger/MultiDataTrigger触发器

对于 DataTrigger / MultiDataTrigger 的功能类似, 只不过触发条件变成了以数据的方式为条件, 有时我们会遇到要求多个数据条件同时满足时才能触发变化的需求,此时可以考虑使用MultiDataTrigger。比如有这样一个需求:用户界面上使用ListBox显示了一列Student数据,当Student对象同时满足ID为2、Name为Tom的时候,条目的高亮显示。

示例的XAML代码如下:

 C#:

 运行效果:

以上是关于样式(Style)和触发器的主要内容,如果未能解决你的问题,请参考以下文章

WPF中样式和行为和触发器

如何在 UWP XAML 上将样式触发器设置为路径绑定父状态

更改基于/继承样式中的触发器顺序

button 样式 触发器

WPF学习第三十七章 触发器

WPF学习第三十七章 触发器