Windows Phone 7 添加按鈕的VSM狀態分組

什麼是VSM（Visual State Manager）？ 大家可以參加jv9的這兩篇部落格： 

Expression Blend執行個體中文教程(11) - 視覺管理器快速入門Visual State Manager(VSM)

Expression Blend執行個體中文教程(12) - 樣式和模板快速入門Style,Template

本文是講如何在VSM中新增自訂的狀態分組.為什麼要新增分組呢？預設的不是很全了嘛，有些人可能會這樣問。

在WPF/Silverlight中，以button為例，會將一些互斥（即不會同時發生）的State分到同一組裡面，如Focus和UnFocus都歸於FocusStates組，而Pressed、Normal、Disabled和MouseOver都歸於CommonStates，那麼不同組之間的狀態可以同時發生麼，當然是肯定的。因為一個button可能出於Pressed，並且Focus的狀態，那麼如果我們想增加這樣的狀態，並且想要button被點擊的時候達到這個狀態，what should we do with Blend ？ just follow me

建立一個WP7的項目，拖入一個按鈕，命名為btnPress，修改Content屬性為Press Me，右擊btnPress，選擇Edit Template--> Edit a Copy如

 

命名Style為btnPressStyle，點擊ok

 

找到States選項卡（如果沒有，可以點擊功能表列Windows-->States開啟），選擇Add State Group，進行添加狀態組

 

 將新添加的Group命名為FocusPressStates，選擇Add State進行添加狀態，這裡我新增兩個狀態：PressFocused、UnPressFocused

 

 選擇PressFocused，會發現美化板周圍出現了紅色邊框（是不是很熟悉呢，對，我們在錄製動畫的時候也是出現紅色邊框），將背景顏色改為紅色，如

 

推出模板編輯，你是不是迫不及待想要看看點擊後的效果呢？

結果很Disappointed，無論你如何用力點擊Press Me，Nothing Hanppened！

Wait，你會想，它（指XAML代碼）如果知道我是什麼時候到達這個狀態呢，我還沒設定呢！ 是的，我們這裡還沒設定，這裡有兩種方法進行狀態設定。我們先以編碼的方式實現。

我們想要在點擊按鈕的時候讓按鈕到達PressFocused狀態，我們可以在Click事件中，使用如下代碼

 

現在再按F5，就會發現，按鈕的背景色變掉了。

 但是，如果對於每個想要這樣狀態的按鈕，都要寫這麼一句話嗎？有什麼簡便的、不用coding的方式實現呢？ 有，Expression Blend中提供了一個名為GoToStateAction的Behavior，我們可以使用它來實現。

 

將GoToStateAction拖到btnPress上，設定其觸發事件和到達狀態（在拖之前，我們先build一下項目）

 

我們現在將Click事件中的代碼注釋掉，然後再按F5，運行程式，會發現跟寫代碼的效果是一樣的。