零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学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的反光区设定为完全透明Opacity0%

技术分享图片

观念在上一章已经有详细说明

?

06 MouseOver设定玻璃质感反光

开始设置MouseOver时Button的动作

请把刚刚我们调为完全透明的反光区调整到可见程度

技术分享图片

?

MouseOver的设定就完成了

?

07 Pressed设定

我们把刚刚MouseOver的反光区稍微做点颜色的调整

并且选取整个Button(包括刚刚制作的两个玻璃质感反光区)

使用Properties->Transform->Scale(X:1.1 、 Y:1.1)

技术分享图片

这样滑鼠点下Button的时候,就会有挤压放大的效果了

技术分享图片

?

08 大功告成

按下F5,就可以看看成果噜!

?

?

很简单的方法,就可以做出不一样的Button喔!

小猴子做了很多Button,比较特别的有机会会一一做给大家~

?

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

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

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

 

 



以上是关于零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior