WPF控件模板与其触发器

什么是ControlTemplate?

ControlTemplate(控件模板)不仅是用于来定义控件的外观、样式, 还可通过控件模板的触发器(ControlTemplate.Triggers)修改控件的行为、响应动画等。

通过剖析控件了解ControlTemplate的组成:

  • 首先,创建一个WPF项目, 创建一个Button按钮, 然后选中该按钮, 右键选择编辑模板>编辑副本:

  • 创建完成后, 会在当前页面<Windows.Resources> 键下面生成一些样式片段 , 一个key为ButtonStyle1的样式:

  • 在看到该样式定义了一些基础的样式, 背景颜色、字体颜色、边框大小、垂直水平位置等, 除此之外, 下方则有一个Template的对象, 其中则就是ControlTemplate, 可以看到, ControlTemplate定义了一个Border ,然后其中定义了一个内弄呈现的控件, ContentPresenter则主要用于呈现按钮的显示内容主体, 如下标记:

  • 我们可以进行一些尝试, 试图修改border的属性, 观察Button会发生怎样的变化, 通过为Border 添加一个 圆角矩形参数, 将背景颜色设置成固定的值, 如下:

通过简单的尝试,可以观察到, 该Border 作为Button按钮的边缘样式和整体的外观控制。

- 接下来, 我们可以通过修改ContentPresenter 中的一些参数, 看看该控件是怎样的一个存在。 修改其中的垂直位置为居下, 为Button设置一个固定Content的值 “Hello”, 观察Hello的位置:

通道实践, 可以了解到, 该内容呈现控件(ContentPresenter) 负责了内容的展示、和一部分属性的控制。

ControlTemplate中的TemplateBinding 的作用?

在ControlTemplate中, 可以看多多次有定义 TemplateBinding 的代码:

TemplateBinding 可以理解为, 通过模板绑定关联到指定的样式、属性。 如此一来 , 当按钮通过显示设置该属性, 则最终会影响着Template绑定的属性值。

下面将通过代码演示, 有 TemplateBinding 和 无TemplateBinding 的区别, 在Button按钮中, 显示定义 按钮的边框颜色为 “Blue”, 分别看两者中的影响:

图(1), 有TemplateBinding :

图(2), 无TemplateBinding:

可以理解, TemplateBinding 主要的作用为, 与外部的属性关系起来, 使其达到改变样式属性的作用。

ControlTemplate.Triggers 触发器

展开ControlTemplate.Triggers 节点, 可以看到其中定义了一些触发条件和改变的样式。

可以看到, 定义了4个触发器, 分别满足条件之后, 改变Border的一些样式, 接下来, 通过一张图,来解释其影响的过程:

实际效果:

同样, 其他的触发器也是通过这样的操作, 来控制着控件的属性变化。

ControlTemplate.EventTrigger 事件触发器

下面定义了一个EventTrigger 事件触发器,

当鼠标进入按钮区域时, 执行一个0.5秒的动画, 将按钮的背景颜色设置为 pink,

当鼠标离开按钮区域时, 执行一个0.5秒的动画,将按钮的背景颜色设置为Green:

实际效果:

自定义ControlTemplate

控件模板可以独立存在, 上面的例子中, 包含在样式文件中, 下面, 单独声明一个独立的控件模板:

  • 1.创建一个ControlTemplate ,设定一个键名称, 指定其模板的类型
  • 2.创建一个Border 用于设置按钮边样式
  • 3.创建一个内容呈现的控件, 设置几个参数的TemplateBinding.
  • 4.按钮的Template 绑定该模板

到此这篇关于WPF控件模板与其触发器的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF实现数据绑定

    简单而言, 数据绑定是一种关系, 这种关系告诉WPF 从一个源目标对象中提取一些信息, 并且使用该信息设置为目标对象的属性.目标属性总是依赖项属性, 并且通常位于WPF元素中. 然而, 源对象可以是任何内容, 可是是随机生成的一个对象.也可以是数据库的数据对象,或者手动创建的对象. 简单绑定 为了能够简单理解这种绑定关系, 接下来简单示例, 用一个数值滚动条, 动态修改一个文字的字体大小, 通过绑定的方式. <StackPanel> <Slider Name="s1"

  • WPF引用MVVM框架与使用方法

    1.NuGet引用MVVM框架包 引入该框架包之后, 默认会在目录下创建ViewModel层的示例代码 2.第二步, 通过在MainViewModel中创建一些业务代码, 将其与MainWindow.xaml 通过上下文的方式关联起来, 而MainWindow则是通过Binding的写法 引用业务逻辑的部分. 在MainViewModel中, 添加同一个班级名称, 与学生列表, 分别用于显示在文本 和列表上展示, Command则用于绑定DataGrid的双击命令上, 通过双击, 展示点击行的学

  • WPF常用控件用法及介绍

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"> <StackPanel> <RadioButton>one</RadioButton> <RadioButton>two</RadioButton> <RadioButton>three</RadioButton> &

  • 对WPF中Expander控件美化

    示例图: Expander控件功能很常见, 一般用于系统左侧的菜单收缩面板. 主要的组成 一个头部(header) 和 一个 内容(content) 组成. <Expander ExpandDirection="Down" SnapsToDevicePixels="True" VerticalAlignment="Top" Style="{DynamicResource ExpanderStyle1}" > <

  • WPF中Style样式及其触发器

    WPF中的各类控件元素, 都可以自由的设置其样式. 诸如: 字体(FontFamily) 字体大小(FontSize) 背景颜色(Background) 字体颜色(Foreground) 边距(Margin) 水平位置(HorizontalAlignment) 垂直位置(VerticalAlignment) 等等. 而样式则是组织和重用以上的重要工具.不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式.然后通过Style属性应用封装好的样式.这点类似于CSS样式.

  • WPF基本控件介绍

    上一章讲到了布局.这点就有点类似建筑设计.第一步是出图纸.整体的结构.而第二步就是堆砌, 建筑学里面也会有很多描述, 例如砖头,水泥.玻璃.瓷板.而在WPF中, 这一切的基础也就是控件.用于填充结构的UI控件. WPF的控件结构 各种控件类型详解 ContentControl 类 设置内容的属性为 Content, 例如 控件目录下只允许设置一次Content, 如下演示给按钮添加一个Image和一个文本显示Label, 错误如下: 正确的使用方式: <!利用我们上一章说讲到的布局容器装载在其中

  • WPF转换器IValueConverter用法

    1. 前文 在普遍的也业务系统中, 数据要驱动到操作的用户界面, 它实际储存的方式和表达方式会多种多样, 数据库存储的数字 0或1, 在界面用户看到显示只是 成功或失败, 或者存储的字符.或更多的格式, 但是最终到界面上, 一般是需要一个转换, 至于这个转换是在数据库中, 还是业务代码中, 都是一个必不可少的操作. 2. WPF转换器 ( IValueConverter ) WPF中, 提供一种数据转换的接口.那就是在 System.Windows.Data 命名空间下的,IValueConve

  • WPF绑定Binding用法

    什么是绑定(Binding)? 在winform中, 我们常常会用到各种类型的赋值, 例如: button1.Text="Hello"; label.Text="Hello"; ... 类似这种赋值操作, 我们之所以不称之为绑定, 主要原因是因为他们大多数操作都是一次性的, 无论是数据还是按钮本身发生变化,对两者而言都是不可见的. 而绑定的概念则侧重于: 两者的关联,协议与两者之间的影响. 首先, 从一个简单的例子来理解什么是绑定. 创建一个滑块控件, 并且希望在滑

  • WPF布局及布局容器介绍

    WPF布局基础 WPF布局原则 一个窗口中只能包含一个元素 不应显示设置元素尺寸 不应使用坐标设置元素的位置 可以嵌套布局容器 WPF布局容器 StackPanel: 水平或垂直排列元素.Orientation属性分别: Horizontal / Vertical WrapPanel : 水平或垂直排列元素.针对剩余空间不足会进行换行或换列进行排列 DockPanel : 根据容器的边界.元素进行Dock.Top.Left.Right.Bottom设置 Grid : 类似table表格.可灵活设

  • WPF控件模板与其触发器

    什么是ControlTemplate? ControlTemplate(控件模板)不仅是用于来定义控件的外观.样式, 还可通过控件模板的触发器(ControlTemplate.Triggers)修改控件的行为.响应动画等. 通过剖析控件了解ControlTemplate的组成: 首先,创建一个WPF项目, 创建一个Button按钮, 然后选中该按钮, 右键选择编辑模板>编辑副本: 创建完成后, 会在当前页面<Windows.Resources> 键下面生成一些样式片段 , 一个key为B

  • WPF开发技巧之花式控件功能扩展详解

    目录 No1. 自定义控件模板 No2. 重写控件 No3. 附加属性来试试 总结 文章默认你已经入门WPF了 ​ WPF日常开发,经常遇到默认的控件功能不满足需求,怎么办? No1. 自定义控件模板 ​ 平时开发中,经常遇到比较"俗"的需求,嫌弃控件默认的样子.怎么办?哈哈,那就整个容呗.....

  • WPF实现在控件上显示Loading等待动画的方法详解

    WPF 如何在控件上显示 Loading 等待动画 框架使用.NET40: Visual Studio 2022; 使用方式需引入命名空间后设置控件的附加属性 wd:Loading.IsShow="true",即可显示默认等待动画效果如下: 如需自定义 Loading 一定要 先设置 wd:Loading.Child 在设置 IsShow="true" . 显示不同 Loading 内容需 wd:Loading.Child ={x:Static wd:NormalL

  • 详解ASP.NET数据绑定操作中Repeater控件的用法

    一.绑定控件之Repeater .NET封装了多种数据绑定控件,诸如GridView.DataList等但该篇文章将会从Repeater入手,因为Repeater只提供了基本的数据绑定模板,没有内置其它分页等功能,所以它是最原始的数据绑定控件,只要能够熟练运用Repeater控件其它的绑定控件也就很简单了. 1.Repeater简介 Repeater 控件是基本模板化数据列表. 它不像GridView控件一样能够可视化的设计格式或样式,因此开发时在控件模板中必须显式声明所有格式.格式和样式标记.

  • WPF集合控件实现分隔符(ItemsControl Separator)

    在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式,但是WPF的ItemsControl没有相关功能的直接实现,所以只能考虑曲线救国,经过研究,大概想到了以下两种实现方式. 先写出ItemsControl的数据模板,如下: <ItemsControl ItemsSource="{Binding Source}" BorderThickness="1" BorderBrush="Blue" VerticalAlignment=&

  • WPF自定义Expander控件样式实现酷炫Style

    首先, 看一下效果图. 点我看视频教程 实现思路 1.PS处理两张选中得特效背景, 一张为主选择得效果图, 另外一张为次选择项得效果图. ![](//files.jb51.net/file_images/article/202201/2022128103603692.jpg) ![](//files.jb51.net/file_images/article/202201/2022128103615294.jpg) 图片资源定义 <!--静态资源--> <ImageBrush x:Key=

  • WPF的ListView控件自定义布局用法实例

    本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 <Application x:Class="CWebsSynAssistant.App" xmlns="http

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

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

  • C# WPF 父控件通过使用可视化树找到子控件的示例代码

    在我们使用WPF设计前台界面时,经常会重写数据模板,或者把控件放到数据模板里.但是一旦将控件放到数据模板中,在后台就没有办法通过控件的名字来获取它了,更没办法对它进行操作(例如,隐藏,改变控件的某个值). 如果你是比我还白的小白,对我刚刚陈述的东西不清楚,接下来我简单说一下什么是把控件放在数据模板中,怎么样的情况没法后台通过名字来获取控件,如果读者对于数据模板这些事儿已经清楚了,或者只关心如何使用可视化树可以将这部分跳过哈. 先上代码介绍一下什么是数据模板以WPF中ListBox控件为例: <L

  • C# WPF Image控件的绑定方法

    在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径,类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称,后面表示具体哪个文件夹下面的哪个图片资源,在程序中,我们甚至可以为Image控件设置X:Name属性,在后台代码中动态去改变Image的Source,但我个人认为这

随机推荐