WPF中Style样式及其触发器

WPF中的各类控件元素, 都可以自由的设置其样式。 诸如:

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

而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。然而, WPF样式的功能更加强大, 如控件的行为。WPF的样式还支持触发器(后面章节会讲到)。

示例

为了能够直观了解到样式(Style)的使用方法, 下面演示一个从传统的定义控件样式到使用Style组织样式的方法。

下面的例子中, 给4个TextBlock设置同样的样式: 字体、字体大小、字体颜色、加粗设置。

效果图与实际代码如下所示:

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

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

Style结构定义了一个 x:key 这点类似于Html中定义id和class, 然后css即可对相应的class和id样式生效。TargetType 的设置为类型TextBlock, 设置目标类型静态文本TextBlock。

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

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

触发器介绍

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

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

Trigger

下面以Border为例, 演示一个简单的Trigger触发器。当鼠标进入Border的范围, 改变Border的背景颜色和边框颜色, 当鼠标离开Border的范围, 还原Border的颜色。代码如下所示:

实际效果:

MultiTrigger

和Trugger类似, MultiTrigger可以设置多个条件满足时, 触发, 下面以TextBox为例, 做一个简单的Demo当鼠标进入文本框的范围, 并且光标设置到TextBox上, 则把TextBox的背景颜色改变成Red

实际效果:

EventTrigger

事件触发器, 当触发了某类事件, 触发器执行响应。下面用实例演示, 为了能直观感受到这类触发器的作用, 用动画演示其功能,下面使用了动画相关的知识, 在学习到后面几个章节, 读者可以进行相关的内容学习。当鼠标进入按钮的范围中, 在0.02秒内, 把按钮的字体变成18号当鼠标离开按钮的范围时, 在0.02秒内, 把按钮的字体变成13号 。 代码及效果如下所示:

实际效果:

结尾: 对于 DataTrigger / MultiDataTrigger 的功能类似, 只不过触发条件变成了以数据的方式为条件, 这块, 需要了解的可以自个儿进行研究。

到此这篇关于WPF中Style样式及其触发器的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • c# WPF中CheckBox样式的使用总结

    c# WPF中CheckBox样式的使用总结

    背景 很多时候我们使用WPF开发界面的时候经常会用到各种空间,很多时候我们需要去自定义控件的样式来替换默认的样式,今天通过两个方法来替换WPF中的CheckBox样式,透过这两个例子我们可以掌握基本的WPF样式的开发如何定义ControlTemplate以及使用附加属性来为我们的控件增加新的样式. 常规使用 我们在使用CheckBox的时候,原始的样式有时不能满足我们的需求,这是我们就需要更改其模板,比如我们常用的一种,在播放器中"播放"."暂停"按钮,其实这也是一

  • WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出界面如下.我们点击确定. 点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子: 可以看到,系统为我们的Slider控件增加了样式--Style="{DynamicResource SliderStyle1}" 现在我们查看样式SliderSty

  • WPF微信聊天和通讯录按钮样式代码分享

    WPF微信聊天和通讯录按钮样式代码分享

    一.先用Path画一下轮廓 <Path Stroke="Red" StrokeThickness="1" Margin="10" StrokeDashCap="Round"> <Path.Data> <GeometryGroup> <PathGeometry Figures="M 4,40 A 16,13 0 1 1 10,45 L 3,48 Z" /> &l

  • WPF自定义TreeView控件样式实现QQ联系人列表效果

    WPF自定义TreeView控件样式实现QQ联系人列表效果

    一.前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是TreeView,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeView数据绑定方法. 二.TreeView仿QQ联系人列表 准确的说不是仿QQ联系人列表,这个TreeView样式作为组织架构来使用更好.废话不多说,先看效果:  2.1.基本思路 像这

  • 在C# WPF下自定义滚动条ScrollViewer样式的操作

    在C# WPF下自定义滚动条ScrollViewer样式的操作

    一.实现对ScrollViewer样式的自定义主要包括: 1.滚动条宽度设置 2.滚动条颜色 3.滚动条圆角 4.滚动条拉动时的效果mouseover 二.实现效果: 三.实现方法 1.创建资源字典( ResourceDictionary)文件 由于style代码比较多,之间在控件文件中加载style比较混乱,也不利于其它窗口复用,这里单独创建了ScrollViewDictionary.xaml文件代码如下: <ResourceDictionary xmlns="http://schema

  • WPF如何自定义ProgressBar滚动条样式

    WPF如何自定义ProgressBar滚动条样式

    一.前言 滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面.在程序开发中,默认的进度加载样式可能跟程序风格不太一样,或者加载进度的时候需要更改一下加载的样式.这个时候就需要通过修改ProgressBar的样式来实现. 二.ProgressBar的基本样式 ProgressBar的基本样式很简单: <Style TargetType="{x:Type ProgressBar}"> <Setter Property="Foc

  • WPF气泡样式弹窗效果代码分享

    WPF气泡样式弹窗效果代码分享

    页面设计需求,做了一个气泡形状的弹出框,效果如下: 设计思路如下: 1. 使用Path绘制气泡的尖尖,将这个放到顶层: 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得Path图层和border看起来衔接在一起. 代码如下: <Window x:Class="BubblePanelTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio

  • WPF自定义MenuItem样式的实现方法

    WPF自定义MenuItem样式的实现方法

    一.前言 默认的MenuItem样式比较普通,这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化.需要其他功能的变化,大家可以根据样式代码进行扩展. MenuItem的样式代码: <!--MenuItem--> <Style TargetType="MenuItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate

  • c# wpf如何使用Blend工具绘制Control样式

    c# wpf如何使用Blend工具绘制Control样式

    本文通过设计一个RadioButton,分享下使用Blend绘制Path的方法.待绘制的RadioButton样式如下文所示,如有更好的方法实现该样式,欢迎交流. 实现效果 将要实现的RadioButton样式如下图,可以看出按钮的笔尖和笔身的填充色,以及选中时右上方圆形的填充色一致,代表笔的颜色. 实现方式 笔身使用矩形,填充色绑定按钮背景色:笔头部分使用闭合的Path,其中笔尖的颜色同样绑定按钮背景色:右上方的圆形使用Ellipse,填充色同样绑定按钮背景色. 实现步骤 1.打开Blend,

  • WPF自定义控件和样式之自定义按钮（Button）

    一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法.下面话不多说了,来一起看看详细的介绍吧. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动. 2.1 普通按钮-扁平化风格 先看效果: 定义Button的样式,详见代码: <Style x:Key="BtnInfoStyle" TargetType="Button&quo

  • WPF如何自定义TabControl控件样式示例详解

    一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabControl的标题能够进行关闭.要实现这些功能我们需要对TabControl的样式进行定义. 二.实现TabControl的标题平均分布 默认的TabControl标题是使用TabPanel容器包含的.要想实现TabControl标题头平均分布,需要把TabPanel替换成UniformGrid: 替换后的

  • Bootstrap风格的WPF样式

    Bootstrap风格的WPF样式

    简介 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css WPF样式和CSS还是不太相同,所以有些内容实现上稍有出入,有些内容用法不太一样,有些内容并没有实现 但至少,一些概念,尺寸和取色,还是很好的借鉴 博客说明按Bootstrap官方文档的顺序来写 App.xaml里引用Bootstrap.xaml资源 <Application.Resources> <ResourceDictionar

随机推荐