Expression Blend创建自定义按钮

简介: 在 Expression Blend 中,我们可以在美工板上绘制形状、路径和控件,然后修改其外观和行为,从而直观地设计应用程序。Button按钮也是Expression Blend最常用的控件之一,在项目中扮演着重要的角色,但是我们会发现,默认外观的 Button,其实一点也不美观,也不够吸引人。

在 Expression Blend 中,我们可以在美工板上绘制形状、路径和控件,然后修改其外观和行为,从而直观地设计应用程序。Button按钮也是Expression Blend最常用的控件之一,在项目中扮演着重要的角色,但是我们会发现,默认外观的 Button,其实一点也不美观,也不够吸引人。
因此,在本篇文章中,我将介绍如何在Expression Blend中自定义button按钮控件,我选择的是将图片转变成按钮,再添加自定义mouseover鼠标滑过的效果。

详细步骤如下:

1 启动Expression Blend,创建一个新项目,创建一个新项目,为项目命名,并选择项目类型(Silverlight, WPF, Windows Phone Application,web application)。本文中我创建的是Silverlight应用。

2 项目创建好后,我们直接从系统拖入想用作Button的图片到美工板上,根据自己的需求用鼠标调整图片大小。这是我选择的一张图片。

3 接下来点击Tools(工具)-> Make into controls(构成控件)

4 弹出对话框,选择controls-> Button,将ButtonStyle1命名为 myimagebutton,或其他名称都可以。

 

我们可以注意到图片上出现了一个Button图标, 我们之前没有给图片命名,所以默认的文本是Button。

5 图片已经转变为Button后,在美工板顶端的导航栏中,点击Button>edit controls part >edit Template。在Appearance外观面板中,又可以为我们的Button添加丰富的效果。

edit Template包含了以下这些内容:

我们看到Grid, 它包括两个子元素,一个是image,另一个是ContentPresenter控件。ContentPresenter控件的是控制按钮文本,点击ContentPresenter就可以看到Button这样的文字。

通过ContentPresenter显示的文本也同样说明了图片现在是一个Button,当然你也可以删除此控件,也就去掉了图片的Button文字。

6 导航栏找到states状态面板,点击CommonStates下面的mouseover。

其中states主要有三个分类:Base, Common States and FocusStates。这些状态能让我们在进行与按钮交互情况下作出可视变化。而Base,它是个默认状态。

7 添加MouseOver后,我们就可以对图片进行处理,这里我旋转并缩小了图片。

8 按F5键预览动画:

当鼠标滑过Button时,结果如下:

最后当鼠标离开图片时,图片又会复原。

当然, 这是一个非常简单的实现过程,更复杂更精致的设计还需要不断尝试。谢谢浏览!

目录
相关文章
|
C#
用 Expression Blend 创建酷炫的 Button
原文:用 Expression Blend 创建酷炫的 Button 原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的凝胶状按钮。
1139 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。
1181 0
|
C#
WPF和Expression Blend开发实例:Loading动画
原文:WPF和Expression Blend开发实例:Loading动画 今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.
1216 0
Expression Blend学习四控件
原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy.
717 0
Expression Blend学习5控件
原文:Expression Blend学习5控件 Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。
848 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
691 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 ...
1240 0
|
Web App开发 前端开发 容器
零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」。
1263 0
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1317 0
|
容器
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1312 0