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#
用 Expression Blend 创建酷炫的 Button
原文:用 Expression Blend 创建酷炫的 Button 原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的凝胶状按钮。
1137 0
|
C#
WPF和Expression Blend开发实例:Loading动画
原文:WPF和Expression Blend开发实例:Loading动画 今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.
1215 0
Expression Blend学习四控件
原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy.
714 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
689 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1201 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 ...
1238 0
|
Web App开发 前端开发 容器
零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」。
1260 0
|
JavaScript C#
零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页
原文:零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页 本章将教大家如何把制作好的Blend专案变为可以让任何人在网际网路...
1303 0