零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I
原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I
本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画。
?
本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画。
?
?
?
01
开启一个新专案,并且置入一个Button,调整到适当大小
?
在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同
不熟的人请看如何用Blend制作一张猴子脸
?
范例调整了:
BorderThickness(Left及Right皆为10)
BorderBrush->Gradient brush->0%(#FFA3AEB9)、37.5%(#FF718597)、100%(#FF000000)
?
按F5来看看效果
按一按Button,你会发现,Mouseover以及Pressed都是蓝色的,这个是多数工具预设的颜色
?
?
02
有时候为了设计整体的需要,会不喜欢Mouseover以及Pressed时呈现的颜色都为蓝色
接下来,要教大家如何把Button修改成我们想要的样子
?
请重新拖拉一个新的Botton到主要工作区後,先调整我们想要的一般外观(Normal)
接着,在Button上单击右键->Edit Template->Edit a Copy
?
出现Create Style Resource->请命名後直接点击OK
?
接着点选左上角的State(如果没有开出State的朋友,可以在Top Menu->State把它勾选出来即可)
?
可以看到有几个状态可以设定:
Normal:一般状态
MouseOver:滑鼠移上去时的状态
Pressed:当点击滑鼠左键时的状态
Disabled:无法点击时的状态
?
现在我们来修改MouseOver时的颜色
请单击MouseOver前的小圆点,进入修改状态,这时你的主要工作区应该会有与设计动画时相同的录影红线外框
点选Properties->Edit修改颜色
(Pressed也是以同样方式修改)
?
修改完成後,可以点选下面两个地方,离开修改样版模式
?
按照惯例,按下F5观看成果,看看是不是已经非预设的样式了呢?
?
03
最後,以简单又快速的方式教大家如何活用刚刚所学的Edit Template结合动画制作
我延续使用刚刚修改的Button,所以这次单击右键後,选Edit Current,就会回到刚刚的画面
?
在还没进入修改状态下,从Assets->shapes放入一个名为Ring的空心同心圆,并且调整到适当的大小
Properties下可以修改Ring的外观(颜色、大小、边宽),较为一般shapes通用的我就不多介绍了
?
空心同心圆的大小使用ArsThickness做调整
另外,我为了等等旋转的动画效果可以看出Ring的旋转,所以我帮它开了个口
我使用的是Properties->Appearance->StartAngle
?
都制作完成以後,请记得把Ring的Opacity设定为0%
(目的在於一般状态下不会出现的物件,需为不可视)
制作Button动画的前置作业已经差不多了
?
再来跟刚刚我们修改颜色的方式一样,单击MouseOver前的小圆点进入修改模式
0秒->Ring的Opacity100%
1秒->Ring拉到Button右边後,请记得调整Y轴为0(保持Y轴水平移动)
若是对Transform不熟的朋友,请参考这篇(Chapter 5 2.5D转换的使用技巧)
?
完成後,按下F5来看看成果
?
04
通常我们在制作Button时,会希望使用者能够注意到滑鼠已经移动到Button,或是希望使用者特别点击某个Button
所以连预设的样式,也把Mouseover以Pressed做些微的变化
如果能善加运用Template以及Animation,对使用者在界面操作来说,会有不一样的视觉以及操作体验
?
?
共勉之~
?
?
?
本篇的教学就到此。
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
?
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I的更多相关文章
- 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...
- 零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckB ...
- 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I
原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...
- 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...
- 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...
- 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...
- 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」
原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...
随机推荐
- OpenGLES 关于 数学 的分支 - 线性变化量、离散量、随机量
关于 数学 的分支 - 线性变化量.离散量.随机量 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作 ...
- 卷积神经网络Lenet-5实现
卷积神经网络Lenet-5实现 原文地址:http://blog.csdn.net/hjimce/article/details/47323463 作者:hjimce 卷积神经网络算法是n年前就有的算 ...
- 5.7-基于Binlog+Position的复制搭建
基本环境 Master Slave MySQL版本 MySQL-5.7.16-X86_64 MySQL-5.7.16-X86_64 IP 192.168.56.156 192.168.56.157 ...
- Qt for Automation
Automation, Automotive, and other industries In addition to improving the generic product offering a ...
- log4erl API
https://github.com/ahmednawras/log4erl/blob/master/API.txt NOTE:=====Please be informed that the API ...
- iOS开发- Xcode插件- 规范凝视生成器VVDocumenter 自己的见解
xcode升级 VVDocumenter 插件失效怎么办?? 首先给个完整的安装參考:http://www.th7.cn/Program/IOS/201405/212030.shtml 參考这个能 ...
- 常见排序算法(java实现)
常见排序算法介绍 冒泡排序 代码: public class BubbleSort { public static void sort(int[] array) { int tValue; for ( ...
- hive character '' not supported here
把在windows环境下编写的sql使用UTF-8无BOM保存后,再上传执行即可
- Unity UGUI——Rect Transform包裹(Anchor Presets)
Anchor Presets使用演示样品物业 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fonts ...
- Android中判断网络是否连接并提示设置
/** * 判断网络是否连通 * @param context * @return */ public static boolean isNetworkConnected(Context contex ...