零元學Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!輕鬆製作擁有動畫的MenuBar!(上)

一直以來都有人拿Flash的動畫問我Blend可不可以做到一樣的動畫效果

雖然我很明白Flash跟Silverlight差異在哪，但似乎對很多人來說，在網頁上的動畫效果已經根深蒂固的覺得只能用Flash才做到!?

在我看來....

善用工具，並且用對工具，就能達到想要的效果!

最近又遇到了有人拿Flash的動畫效果問我MenuBar的動畫效果運用Blend能不能做到一樣?

為了證明Blend也能做得到，我就做了一個一樣效果的東西還了回去。

技術日新月異，很多工具軟體也越來越人性化，操作起來更是便捷

可能我對Blend有著特殊的感情，所以很偏心吧?

在Flash跟Blend做比較時，總是有著不想讓Blend設計出的東西輸掉一樣的心情...

所以我把這次的MenuBar動畫效果，分享給想要學習Blend的朋友

本章你將會學習到的觀念有

RaidoButton的應用

Button觸發範圍大小的變更

使用Clip達到遮罩效果的運用

State和動畫以及EasingFunction的複習

請移動滑鼠或是試試看效果

就是要讓新手都看得懂!

那我們開始吧!

01

首先，在主要工作區置入一個Border：(想看Border的深入介紹請點這裡)

(1)Background：本範例使用粉紅色漸層，你可以自訂，或是參考小猴子的設定

(2)BorderBrush：No
brush

(3)BorderThickness：0

(4)CornerRadius：5





02

Border的部分完成後，為了使MenuBar內的按鈕能夠水平且整齊的排列

這邊我們在Border內置入一個StackPanel，並請記得把Orientation設定為Horizontal

(想看StackPanel的深入介紹請看這裡)





03

基本上使用者操作，點選Menu選項時，一般都只會選取一個按鈕

所以這邊使用帶有只能單選屬性的RaidoButton：

(1)
因為RadioButton是不能複選的，所以當使用者選取群組中的一個選項按鈕時，會自動清除其他選項按鈕；雖然RadioButton在同一個容器只能被選取1個，不過若是在不同容器裡的RadioButton，就算在同一個頁面還是可以被選取的喔!

(2)
RadioButton 和 CheckBox控制項兩者的功能類似：皆是讓使用者選擇選取或清除，但差別在於CheckBox可以同時選取多個選項按鈕，RadioButton 則否。

可以在MSDN中，看到更多對RaidoButton的特性介紹

(其實在Ch26時，有針對RaidoButton做過一次介紹了，回顧請看這裡。)

(想看CheckBox的深入介紹，請看Ch17與Ch18)





04

放入了RaidoButton以後，接著就是要改變它的Template，使之變成我們想要的樣子

點選RaidoButton->Edit
Template->Edit a Copy，開始修改預設樣式





刪掉不要的部份





把ContentPresenter置中





05

接下來，有個重要的小技巧要教大家

因為RaidoButton目前只有文字的地方是有顏色的，所以只有文字部分會觸發事件

對HitTest機制的觸發來說，它會選擇有顏色的地方來認定選取範圍

但是為了避免觸發範圍過小，所以要把Border設為有填色

如下圖：





除非有特殊的用途，不然一般在設計上，都會希望使用者可以很方便就能點選按鈕

(想深入瞭解HitTest機制嗎?請看Ouch@點部落-[Silverlight]透過Grid來初步了解物件的MouseEnter、HitTest機制)

接下來照著設定，就可以修改觸發範圍的大小

目前一樣是在Template編輯模式

Step1：選取最外層的Grid->Brushes->Background->隨便你選取什麼顏色

Step2：更改顏色的透明度->100%改為0%

Step3：完成!





06

再來運用Make
Clipping Path製作遮罩範圍

同樣是在Template編輯模式

Step1：在Grid內置入一個Rectangle，並使它填滿整個Grid

Step2：在Rectangle上單擊滑鼠右鍵->Path->Make
Clipping Path





Step3：選擇要被路徑剪裁的物件(Choose
the object that will be clipped by the path)->Grid





Step4：完成

如下圖，物件超過遮罩就不會顯示

可以在Properties->Miscellaneous->Clip檢查是否已完成Make
Clipping Path





想看更多的Clip介紹，請參考Ch37與Ch38喔!

07

置入一個Rectangle與Triangle，為我們將要製作的梯型做準備

Rectangle與Triangle交疊的部分，如下圖位置：





接著一併選起Rectangle與Triangle後，單擊滑鼠右鍵->Combine->Subtract

完成後，你會得到一個梯型的Path





接著把梯型Path放到能充滿整個Grid的適當位子，並把透明度調整為20%





08

切換到State

在Base狀態下，設定Transform的Translate
X，讓梯型Path退到Grid左邊





選取Mouseover，開啟Show
Timeline後移動時間軸至0.5秒

並且調整Translate
X使梯型Path回到原位





最後設定EasingFuntion->Back
InOut->Amplitude(幅度)->1





完成後，離開Template編輯模式

並複製多個RadioButton在同一個StackPanel裡

將會看到如下的成果

接下來的設計，下篇告訴你

附上本篇的範例下載

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