零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例。
?
本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例
?
?
01 拉出一个圆
请以Ellipse拖拉出一个圆形,并修改圆形的颜色
范例:
Fill->Gradient brush->Radial gradient(0%.#FFFF0000)(100%#FF000000)
?
02 把圆形转换成控制项
选取圆形,并且在圆形上单击滑鼠右键->Make Into Control
点选Button以及命名完成後点下OK即可
?
03 Binding
依照上个步骤,我们会进入到Edit Template的模式
这时,要请大家先做好很重要的Template Binding动作
选取已经为Button的Ellipse
Properties->Brush->Fill後面的小白点(Advanced options)->Template Binding
若没有做好原来Button以及样板的Template Binding,会造成一般模式及Edit Template模式颜色不同步的情形
Template Binding好以後,开始我们的Template编辑
?
04 Edit Template
为了有玻璃质感,所已需要增加反光的区域
请拖拉出一个椭圆,渐层设定为线性,并且调整透明度
如下图(范例Alpha为33%)
?
把反光区域放到圆内,如下图的位置:
?
05 MouseOver的反光区
再来制作MouseOver的反光区
我们一样拉一个圆形,调整好颜色
Fill->Linear gradient(0%.##FFFFFFFF.Alpha40%)、(100%.#FF000000.Alpha40%)
完成後,请拉到适当位置
?
这边要注意一个重点,在一般状态,我们须把MouseOver的反光区设定为完全透明Opacity:0%
观念在上一章已经有详细说明
?
06 MouseOver设定玻璃质感反光
开始设置MouseOver时Button的动作
请把刚刚我们调为完全透明的反光区调整到可见程度
?
MouseOver的设定就完成了
?
07 Pressed设定
我们把刚刚MouseOver的反光区稍微做点颜色的调整
并且选取整个Button(包括刚刚制作的两个玻璃质感反光区)
使用Properties->Transform->Scale(X:1.1 、 Y:1.1)
这样滑鼠点下Button的时候,就会有挤压放大的效果了
?
08 大功告成
按下F5,就可以看看成果噜!
?
?
很简单的方法,就可以做出不一样的Button喔!
小猴子做了很多Button,比较特别的有机会会一一做给大家~
?
?
本篇的教学就到此。
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
最新文章
- web全栈开发之网站开发二(弹出式登录注册框前端实现-类腾讯)
- mysql自增列导致主键重复问题分析。。。
- Json数据的学习
- 使用weave实现跨主机docker容器互联
- Julien Nioche谈Apache Nutch 2的特性及产品路线图
- MySQL5日期类型DATETIME和TIMESTAMP相关问题详解
- winform托盘时,要运行一个实例,解决办法
- S3C6410嵌入式应用平台构建(二)
- UC网盘被关停 将与阿里淘盘合并?(案例说明云盘的成本才是重点,技术不是问题;与巨头竞争是重点)
- Unit Of Work-工作单元
- ThinkPHP 数据库操作(四) : 聚合查询、时间查询、高级查询
- HDFS副本放置策略
- new 对象时的暗执行顺序
- git配置用户名邮箱,全局配置/单仓库配置
- java中的关键字、保留字、标识符
- C++基础知识(3)
- NOI.AC省选模拟赛第一场 T1 (树上高斯消元)
- Python - 字符和字符值之间的转换
- eclipse中代码里的黄色感叹号,怎么去掉?
- C#中实现https的双向认证
热门文章
- IDEA多模块父子依赖maven项目war包部署
- Windows7系统下安装OpenSSL攻略
- thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么)
- AJAX简介(转)
- 卷积神经网络(CNN)与特殊的卷积
- webcollector 2.x 爬取搜狗搜索结果页
- node与webpack的process.env.NODE_ENV
- Bootstrap Thumbnail
- malloc()与calloc差异
- Linking different libraries for Debug and Release builds in Cmake on windows?