Expression Blend学习四控件

简介: 原文:Expression Blend学习四控件Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy.
原文: Expression Blend学习四控件

Expression Blend制作自定义按钮

1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125;

2.右键点击此按钮,选择Edit control parts(template)>Edit a copy...

wps_clip_image-7914

3.在弹出的Create style resource对话框中,修改新按钮样式的名称

wps_clip_image-20662

4.在左侧的Object and timeline面板中选中ContentPresenter元素,按Ctrl+X将此标记临时保存到内存中

wps_clip_image-15717

5.选中Chrome,按Delete键删除

wps_clip_image-30674

6.选中Template,在工具条中双击Grid,添加一个Grid到Template中

wps_clip_image-29452

7.双击Grid,按Ctrl+V将之前保存在内存中的ContentPresenter元素粘贴到Grid中

wps_clip_image-15883

8.在Property面板的Layout中修改ContentPresenter的属性,将HorizontalAllignment和VerticalAllignment设为Center,将Margin属性Reset为0

wps_clip_image-12921

9.添加一个Ellipse到Grid中,设置其width和Height属性为Auto,这样此圆会始终与Grid大小相同

wps_clip_image-29340

10.选中Ellipse,然后在Brushes中选择GradientBrush

wps_clip_image-16605

11.选中左侧的Stop,调整其颜色为深蓝色,然后将其向右拖到大约三分之一的位置

wps_clip_image-13646

12.在工具条中选择Brush Transform工具,然后按住圆上的箭头调整使其朝向右上角

wps_clip_image-22732

wps_clip_image-20623

13.选择Stroke,设置颜色为黄色,StrokeThickness为5

wps_clip_image-21634

14.在Triggers面板中点击+Property,添加一个PropertyTrigger 

wps_clip_image-4386

15.选择IsMouseOver,然后修改结果为True

wps_clip_image-9030

wps_clip_image-28802

16.将左侧的Stop的颜色设置为浅蓝色,并将StrokeThickness设置为8

wps_clip_image-10953

17.点击ScopeUp按钮推出Template编辑,然后按F5,即可看到自定义按钮的实际效果

wps_clip_image-20269wps_clip_image-31938

不过这个自定义按钮还是有点问题:按钮的Content属性是字符串"Button",可实际上看不到这个内容。原因是在编辑Template 时,ContentPresenter(用于放置Content的元素)和Ellipse的顺序不正确,导致Content被Ellipse遮住了,只要进入编辑模式将ContentPresenter的位置调整下就好了

wps_clip_image-9841wps_clip_image-18957

修正后的自定义按钮的行为就很正常了:

wps_clip_image-5487wps_clip_image-2069

注意,由于Button是一个Content控件,具有Content属性,因此可以包含任何WPF控件/元素,比如图片等,而不仅仅是"Button"这样的字符串。 

目录
相关文章
|
C#
用 Expression Blend 创建酷炫的 Button
原文:用 Expression Blend 创建酷炫的 Button 原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的凝胶状按钮。
1143 0
|
C#
在Expression Blend中制作侧面为梯形的类棱柱体
原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇“在WPF设计工具Blend2中制作立方体图片效果”( http://blog.csdn.net/johnsuna/archive/2007/08/10/1736000.aspx )中,演示了如何制作立方体形图片效果;本篇则制作侧面为梯形的类棱柱体形图片。
1051 0
Expression Blend学习5控件
原文:Expression Blend学习5控件 Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。
852 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
694 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1208 0
|
前端开发 容器
零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」
原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding,中...
1276 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
|
容器
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1314 0
|
容器
零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用
原文:零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项...
1233 0