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用几种方法来创建酷炫的凝胶状按钮。
1143 0
|
C#
在Microsoft Expression Blend 2 中绘制圆角矩形按钮
原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.com 版权所有:a3news(AT)hotmail.com */(1)打开Blend 2,新建一个工程名称为:LinearGradientButton。
1189 0
|
C#
在Expression Blend中制作侧面为梯形的类棱柱体
原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇“在WPF设计工具Blend2中制作立方体图片效果”( http://blog.csdn.net/johnsuna/archive/2007/08/10/1736000.aspx )中,演示了如何制作立方体形图片效果;本篇则制作侧面为梯形的类棱柱体形图片。
1051 0
|
前端开发 数据格式 XML
Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可)。 这两款软件可以在微软Expression官方网站上下载:http://expression.
1095 0
|
C#
WPF和Expression Blend开发实例:Loading动画
原文:WPF和Expression Blend开发实例:Loading动画 今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.
1219 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
694 0
|
Go C#
Motion Paths in WPF 4 using Expression Blend 4
原文 Motion Paths in WPF 4 using Expression Blend 4 Posted by: Pravinkumar Dabade , on 3/19/2011, in Category WPF  Views: 65576  Abstract: I...
1190 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1207 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 ...
1247 0
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1324 0