Expression Blend学习5控件

简介: 原文:Expression Blend学习5控件Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。
原文: Expression Blend学习5控件

Expression Blend ButtonStyle- TextButton

本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。

对于这个TextButton的需求是这样的,鼠标悬浮时,光标变为“手指”,并改变按钮的前景色,鼠标按下时,有明显的按下的感觉。

都会遇到一个问题,ContentPresenter没有Foreground属性,如何改变前景色?

新建一个TextBlock,输入I'm TextButton

wps_clip_image-26354

  右击TextBolck,选择Make Into Control

wps_clip_image-29991

  为我们的样式取名为TextButtonStyle,Blend默认每次新建样式时的ControlType就是Button,所以直接点击OK

wps_clip_image-7276

  看一下Blend为我们生成的元素列表,他将TextBlock自动转换为ContentPresenter,并用一个Grid包裹。

wps_clip_image-28645

鼠标悬浮时,改变按钮的前景颜色,为了实现这个效果,先将ContentPresenter替换为ContentControl 。(替换方法为:先删除ContentPresenter,然后点击工具条上的wps_clip_image-7380按钮,在搜索栏中输入ContentControl,如果没结果请稍等几十秒s)

wps_clip_image-22116

注意:wpf中使用这种方法也是可行的。只是将ContentPresenter替换为ContentControl后,必须给ContentControl加上“SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"”。

  将ContentControl.Content属性与Button逻辑树中的Content属性绑定。点击ContentControl,在右侧属性面板中,找到Content属性,点击Content属性最右侧的小方块。    

wps_clip_image-1350

  在弹出菜单中,顺序选择Template Binding -> Content

wps_clip_image-20443

  如果你上面的步骤都操作正确的话,ContentControl的Content属性会自动绑定我们之前输入的文本    

wps_clip_image-27805

注意:wpf的过程中是丢失字体的,需要重新添加

  为什么要使用ContentControl?原因在于ContentControl比ContentPresenter多了一个Foreground属性。这样我们可以方便的改变按钮的前景色,无论他是文本还是Path。下面我们开始制作OnMouseOver时的动画,尝试改变前景色。打开States面板,选择MouseOver,点击显示时间线wps_clip_image-23112图标,将黄色时间线拖拽到0.3秒处。  

wps_clip_image-22820

  设置前景色为#FFDE9107 

wps_clip_image-2539

  点击停止录制按钮,暂时暂停动画的录制。 

wps_clip_image-26357

  设置Cursor为hand,然后点击开始录制按钮,启动动画录制。 

wps_clip_image-7971

  此时MouseOver状态下动画面板应该是这样的 

wps_clip_image-25140

  接下来我们定义压下效果,首先右击States面板中的MouseOver,选择Copt State To然后选择Pressed 

wps_clip_image-19940

  点击Preesed状态,在对象面板中选中ContentControl 

wps_clip_image-17695

  设置ContentControl的RenderTransform.TranslateX 为1 ,RenderTransform.TranslateY为1 

wps_clip_image-26043

  此时Pressed状态下动画面板应该是这样的 

wps_clip_image-4463

目录
相关文章
|
C# 开发工具 数据安全/隐私保护
C# 实现 Word 加盖骑缝章效果
C# 实现 Word 加盖骑缝章效果
|
SQL IDE Java
IDEA控制台如何查看格式化的SQL(MyBatis Log插件)
IDEA控制台如何查看格式化的SQL(MyBatis Log插件)
2344 0
|
9月前
|
存储 缓存 人工智能
Ascend上的FlashAttention实现
FlashAttention是优化Transformer模型计算效率和内存使用的技术,通过减少存储访问开销提升性能。它采用Tiling、Recomputation、分块SoftMax等策略,减少HBM访问,加速计算,并在昇腾AI处理器上实现了显著的性能提升。
|
机器学习/深度学习 人工智能 供应链
AI在各行业的具体应用与未来展望
人工智能(Artificial Intelligence, AI)作为一项颠覆性技术,正在逐步改变我们的生活和工作方式。从语音助手到自动驾驶汽车,AI的应用已经深入到各个领域。本文将详细探讨AI在不同行业中的具体应用,以及未来可能的发展方向。
3112 6
|
11月前
|
程序员 C语言
【C语言】分支语句(逻辑运算符与关系运算符)
【C语言】分支语句(逻辑运算符与关系运算符)
164 0
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
心得经验总结:汉字转拼音城市绑定
心得经验总结:汉字转拼音城市绑定
74 0
|
算法 定位技术 调度
基于蚁群算法的多配送中心的车辆调度问题的研究(Matlab代码实现)
基于蚁群算法的多配送中心的车辆调度问题的研究(Matlab代码实现)
337 0
基于蚁群算法的多配送中心的车辆调度问题的研究(Matlab代码实现)
|
SQL 存储 消息中间件
集度汽车 Flink on native k8s 的应用与实践
在集度汽车实时计算的发展过程中,Flink 起到了至关重要的作用。Flink 的低延迟,高吞吐,支撑着整个公司的实时数据流。
集度汽车 Flink on native k8s 的应用与实践
|
编译器
C++11之用户自定义字面量(ClassType operator““_C(param...))
C++11之用户自定义字面量(ClassType operator““_C(param...))
190 0