零元學Expression Blend 4 - Chapter 33 簡單輕松的學會如何使用Visual States(下)

上篇提到了Visual State Manager中文翻譯為視覺狀态管理器是Blend的強大功能之一

本篇要更深入介紹如何使用

?

本篇範例最後成果：

很抱歉，閣下使用的浏覽器并不支援 IFrame，不能正常浏覽我的網頁

01

接續着上篇的介紹，是以接下來開始相關效果的設定

左鍵單擊MouseOver，工作區左上方會亮起小紅點并顯示”state recording is on”

在這個狀态下，請把愛心的顔色更改為#FFFFCACA

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_20.png"></a>

再來是Pressed，一樣單擊Pressed使之為state recording is on狀态

(應該可以發現，從MouseOver轉換為Pressed時愛心從粉紅色會更改回白色，這就是狀态間的變換)

選取最大的圓，并更改些微的大小

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_18.png"></a>

你可以再次按下F5，試試看是否Button已經有操作時視覺上的回報了

注意到了嗎?<b> </b>我們不用編寫任何程式碼或XAML就能改變我們按鈕的外觀

02

而接下來介紹如何使用Visual State功能處理視覺狀态間的變換

為了更明顯看出兩個狀态變換間的差異，我讓Pressed時的圓形變得比剛剛更大一點

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_16.png"></a>

在Visual State預設情形下，由一個視覺狀态移動到另一個視覺狀态時，Blend會自動的建構和執行過渡時間的Storyboard（即為Blend自動幫我們生成了2個狀态間平滑過渡的動畫效果）

再一次實作了在Blend裡，你不需編寫任何程式碼就可以讓這一切發生

但若還是想要自訂過渡時間的Storyboard，你還是能加自己所設計的Storyboard

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_14.png"></a>

Blend的自動過渡功能中你可以利用的一個特性是，自訂視覺狀态過渡發生所需要花費的時間

單擊Add Transition(狀态右邊帶有”+号”的箭頭)-&gt;MouseOver-&gt;Pressed

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_12.png"></a>

清單裡有：

＊ -&gt; MouseOver

MouseOver -&gt; Normal

MouseOver -&gt; Pressed

MouseOver -&gt; Disabled

MouseOver –&gt; ＊

“星号＊＂表任何狀态

是以＊ -&gt; MouseOver表示任何狀态到MouseOver

而MouseOver -&gt; ＊，則表示MouseOver到任何狀态

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_10.png"></a>

設定一個TransitionEffect，Blend已經内建了許多效果，你可以選一個喜歡的效果來測試

範例這裡選的是Ripple

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_8.png"></a>

接着的是EasingFunction，但這個範例我們不使用這項功能

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_6.png"></a>

接着設定當MouseOver狀态移到Pressed狀态時，過渡效果所執行的時間

Transiton duration -&gt;由0s改為1s，設定值接受小數點

這裡表示由MouseOver狀态移到Pressed狀态須經過1秒鐘的執行時間

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_4.png"></a>

完成後按下F5看看成果

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_2.png"></a>

你應該會發現很明顯的差異

其他狀态的過渡效果可以依不同的需求作調整

相信你會慢慢發現Blend這項強大功能的神奇力量

附上本範例的專案

本篇的教學就到此。

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

一步一步邁向HIE之路

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

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