(精华)2020年01月02日 WPF控件模板

举报
愚公搬代码 发表于 2021/10/20 00:28:34 2021/10/20
【摘要】 什么是ControlTemplate? ControlTemplate(控件模板)不仅是用于来定义控件的外观、样式, 还可通过控件模板的触发器(ControlTemplate.Triggers)修改控件...

什么是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 绑定该模板

在这里插入图片描述

文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。

原文链接:codeboy.blog.csdn.net/article/details/111771180

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。