Expression Blend创建自定义按钮
在 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时,结果如下:
最后当鼠标离开图片时,图片又会复原。
当然, 这是一个非常简单的实现过程,更复杂更精致的设计还需要不断尝试。谢谢浏览!
最新文章
- WVS简单使用
- javascirpt对象运用与JS变量
- [问题2014A12] 复旦高等代数 I(14级)每周一题(第十四教学周)
- C++学习笔记:Vector容器
- StringBuilder 用法和div获取
- 基于Sql Server 2008的分布式数据库的实践(四)
- Linux基本命令总结(八)
- [Linux]ln -al输出内容解析
- 爸爸在家庭中最应该扮演的角色,是爸爸本爸!zz
- 手写注解实现SpringMVC
- postgresql时间处理
- 安装的Android SDK下无doc文件夹问题 以及关联Android帮助文档和查看文档 以及查看在线文档
- 【转】react的高阶组件
- Python 操作数据库pymysql
- Window 7 平台的IE11浏览器预览版发布
- Gridview 尾部添加总计
- vue-devtools 必备开发工具
- 将xml文件转为c#对像
- Python第一次写的代码
- RabbitMq解决分布式事物
热门文章
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
- 算法笔记_013:汉诺塔问题(Java递归法和非递归法)
- Oracle Database 12c Data Redaction介绍
- mybatis_映射查询
- addTwoNumbers
- Lind.DDD.Aspects通过Plugins实现方法的动态拦截~Lind里的AOP
- SSIS 包部署 Package Store 后,在 IS 中可以执行,AGENT 执行却报错
- Linux字符设备驱动框架
- MyEclipse对Maven的安装
- X Window 的奥秘