在 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时,结果如下:
最后当鼠标离开图片时,图片又会复原。
当然, 这是一个非常简单的实现过程,更复杂更精致的设计还需要不断尝试。谢谢浏览!