零元学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之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您