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

我們接著進行動畫MenuBar的製作

01

接續著上一篇的範例，要使文字的位置在MouseOver也有變化

回到Template編輯模式->MouseOver->ContentPresenter

使用Translate
X調整文字的位置





為了要達到文字被往右帶出的效果，所以我們來做以下的設定

0.3秒 Translate
X : 8

0.4秒 Translate
X : -8 並設定 EasingFunction
Back InOut 為1

0.5秒 Translate
X : 0

02

上一篇只介紹到當MouseOver時會有動畫，而滑鼠移開選項時沒有動畫

但當滑鼠移開選項時，會進入一般狀態，所以Normal一樣也需要設定，讓選項的動畫有收回的效果

先設定Path的部分：

0.0秒
Translate X : 0





0.5秒
讓梯型Path退到Grid左邊，範例是設定為Translate X : -116，並設定 EasingFunction
Back InOut 為1

再來是文字

接著做到文字往左被帶走的效果，所以設定的數值如下：

0.3秒
Translate X : -8

0.4秒
Translate X : 8 ，並設定 EasingFunction Back InOut 1(也可選擇在這裡不設定EasingFunction)

0.5秒
Translate X : 0





F5試試看，目前的動畫效果是否在Mouseover時，文字也會跟著跳動了呢?

03

接著，要來設定CheckStates

CheckStates->Checked->grid->Background，於0秒調整Alpha由0%->20%





一樣按下F5，檢視一下Checked後的效果

不過.....是否發現了Checked以後的Menu選項一樣會跑MouseOver的動畫呢?

請回到Checked
State的設定，教你一個小訣竅

04

一樣在Checked
State的設定模式下，Grid->CommonProperties->IsHitTestVisible





請把IsHitTestVisible的選取取消





按下F5檢查一下，是否Checked以後的Menu選項不會跑MouseOver的動畫了?

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

如果不需要第二層Menu的朋友，可以在RadioButton內放入HyperlinkButton

(想了解更多Hyperlink功能請看Ch22)





若還需要製作第二層Menu，請看下篇介紹。