零元學Expression Blend 4 - Chapter 16 用實例了解互動控制項「Button」II


本章將教大家如何製作自己的Button,並以玻璃質感Button為實作案例。

 

本章將教大家如何製作自己的Button,並以玻璃質感Button為實作案例

 

 

01 拉出一個圓

請以Ellipse拖拉出一個圓形,並修改圓形的顏色

範例:

Fill->Gradient brush->Radial gradient(0%.#FFFF0000)(100%#FF000000)

clip_image002

 

02 把圓形轉換成控制項

選取圓形,並且在圓形上單擊滑鼠右鍵->Make Into Control

點選Button以及命名完成後點下OK即可

clip_image003

 

03 Binding

依照上個步驟,我們會進入到Edit Template的模式

這時,要請大家先做好很重要的Template Binding動作

選取已經為Button的Ellipse

Properties->Brush->Fill後面的小白點(Advanced options)->Template Binding

若沒有做好原來Button以及樣板的Template Binding,會造成一般模式及Edit Template模式顏色不同步的情形

16-1

Template Binding好以後,開始我們的Template編輯

 

04 Edit Template

為了有玻璃質感,所已需要增加反光的區域

請拖拉出一個橢圓,漸層設定為線性,並且調整透明度

如下圖(範例Alpha為33%)

clip_image005

 

把反光區域放到圓內,如下圖的位置:

clip_image006

 

05 MouseOver的反光區

再來製作MouseOver的反光區

我們一樣拉一個圓形,調整好顏色

Fill->Linear gradient(0%.##FFFFFFFF.Alpha40%)、(100%.#FF000000.Alpha40%)

image

完成後,請拉到適當位置

image

 

這邊要注意一個重點,在一般狀態,我們須把MouseOver的反光區設定為完全透明Opacity0%

image

觀念在上一章已經有詳細說明

 

06 MouseOver設定玻璃質感反光

開始設置MouseOver時Button的動作

請把剛剛我們調為完全透明的反光區調整到可見程度

image

 

MouseOver的設定就完成了

 

07 Pressed設定

我們把剛剛MouseOver的反光區稍微做點顏色的調整

並且選取整個Button(包括剛剛製作的兩個玻璃質感反光區)

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

image

這樣滑鼠點下Button的時候,就會有擠壓放大的效果了

image

 

08 大功告成

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

 

 

很簡單的方法,就可以做出不一樣的Button喔!

小猴子做了很多Button,比較特別的有機會會一一做給大家~

 

 

本篇的教學就到此。

 

 

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您