Expression Blend實例中文教程(11) - 視覺管理器快速入門Visual State Manager(VSM)
Visual State Manager,中文又稱視覺狀態管理器（簡稱為VSM），是Silverlight 2中引進的一個概念。通過使用VSM，開發人員和設計人員可以輕松的改變項目控件的視覺效果，在項目中VSM主要用於創建自定義控件以及控件模板。為了能夠打造個性絢麗的Silverlight項目，學習掌握VSM是非常必要的。本文將介紹VSM的快速入門知識以及VSM在Blend中的使用方法。
在學習VSM前，首先，了解以下幾個基本概念：
正如前文所說，VSM視覺管理器是用戶控制項目控件的視覺效果，Silverlight在定義控件的時候，將其外觀效果獨立封裝，另外對控件邏輯部分也進行了獨立封裝，換句話說，當開發人員修改控件外觀效果的時候，不會影響到控件的邏輯部分。由此可見，Silverlight控件是由兩個主要部分所組成，Parts（部件）和 States Model（狀態模塊）。
1. Parts （部件），主要負責控件的外觀顯示。Silverlight的大部分控件都是由多個子控件組合而成，而這些子控件部分就是Parts。 註意，這裏我們說是大部分控件都由子控件組合而成，並非所有控件都有子控件部分，所以，也有可能控件沒有Parts（部件）部分。在MSDN對於控件有詳細的說明，具體控件的組成需要查詢MSDN。
這裏我們看看下面的例子，我們使用ChildWindow作為解釋例子：
在一個ChildWindow中，有6個Parts（部件），分別是
Chrome，子窗口框架
CloseButton， 子窗口頭部的關閉按鈕
ContentPresenter， 子窗口主要內容部分
ContentRoot， 是承載Chrome和CotentPresenter的容器
Overlay， 當子窗口打開的時候，覆蓋在父窗口上的部件
Root， 父控件
從上面可以看出，一個ChildWindow是由6個子部件組成，而修改這6個Parts的外觀樣式，自然也就更改了ChildWindow的外觀顯示狀態，也就產生了不同的視覺效果。
2. Visual States Model（視覺狀態模塊），為了理解方便，可以細分為三部分來理解，Visual States（視覺狀態），Visual State Groups（視覺狀態組）和Visual Transitions（視覺過渡轉換）
Visual States（視覺狀態）
Closed，子窗口隱藏
Open，子窗口顯示
再一個簡單的控件,Button（按鈕）控件的Visual States（視覺狀態），Button按鈕控件有6個Visual States狀態，從下圖可以看出這6個Visual States在不同的條件下，每個都有自己獨特的顯示方式。
Normal，正常狀態；
MouseOver，鼠標在按鈕上時，按鈕顯示狀態；
Pressed，按鈕按下的狀態；
Disabled，按鈕無效的狀態；
Focusd，焦點在按鈕上的狀態，與Unforcused互斥；
Unfocused，焦點不在按鈕上的狀態，與Forcused互斥；
Visual State Groups（視覺狀態組）是為有互斥效果的控件提供的功能.對於相同的Visual State Groups（視覺狀態組），呈互斥狀態；而對於不同的Visual State Groups（視覺狀態組）是不做互斥狀態處理的。簡單的理解，一個控件可以同時屬於兩個不同的Visual State Groups（視覺狀態組）。CheckBox是最具有有Visual State Groups（視覺狀態組）特征的控件。
CheckBox具有四個Visual State Groups（視覺狀態組）,分別是CommonStates，CheckStates，FocusStates和ValidationStates。 從上圖可以看出，CheckBox的Normal狀態和Checked狀態，因為屬於不同的Visual State Groups（視覺狀態組），所以可以同時並存。而CheckBox的Normal和Pressed狀態屬於同一個Visual State Groups（視覺狀態組），所以不能同時共存，僅有一個狀態效果有效。
Visual Transitions（視覺過渡轉換）可以簡單理解為視覺狀態切換時的過渡動畫效果。從Windows Vista開始微軟已經開始應用這種效果，這樣使用戶在使用控件時有更自然更人性化操作的感覺。最簡單的例子，
上面介紹的是在學習VSM前，需要掌握的基礎知識，有利於理解下文。
Visual State Manager（VSM)視覺狀態管理器
從字面意思可以理解，既然是視覺狀態管理器，自然是管理Silverlight控件的Visual States Model（視覺狀態模塊）的。 在Silverlight中VSM以代碼的方式控制Visual States，Visual States Group和Visual Transitions。例如：
1 <vsm:VisualStateManager.VisualStateGroups>2 <!--Define the states for the common states. The states in a
3 VisualStateGroup are mutually exclusive to each other.-->
4 <vsm:VisualStateGroup x:Name="CommonStates">
5 <!--Define the VisualStates in this VistualStateGroup.-->
6 <vsm:VisualState x:Name="Normal"/>
7 <vsm:VisualState x:Name="MouseOver" />
8 <vsm:VisualState x:Name="Pressed" />
9 <vsm:VisualState x:Name="Disabled" />
10 </vsm:VisualStateGroup>
11 <!--Define the states for the focus states. The states in a
12 VisualStateGroup are mutually exclusive to each other.-->
13 <vsm:VisualStateGroup x:Name="FocusStates">
14 <!--Define the VisualStates in this VistualStateGroup.-->
15 <vsm:VisualState x:Name="Focused" />
16 <vsm:VisualState x:Name="Unfocused" />
17 </vsm:VisualStateGroup>
18 </vsm:VisualStateManager.VisualStateGroups>
另外微軟提供VisualStateManager類對控件視覺狀態進行管理，只要使用GoToState即可切換視覺狀態。
VisualStateManager.GoToState(myButton, "Disabled", true);
但是從MSDN中，我們可以了解到，對於復雜的控件經常會有數十種視覺狀態需要管理和維護，如果需要創建一個自定義樣式的控件，有時需要創建上百行的視覺管理代碼。對此微軟在Blend中提供Visual State管理面板，簡化開發人員和設計人員在創建自定義控件時的工作量。在使用Blend設計視覺狀態前，我們需要結合過去的教程，理解一下當前的類的層次情況，請看下圖：
從上圖可以看出，VSM控制著視覺狀態States，在視覺狀態中，可以使用StoryBoard動畫效果來表示特定情況下的顯示狀態，而StoryBoard中，允許開發人員設置運行周期以及動畫運行方式。下面我們結合實例來理解。
首先我在Blend中創建一個新Project，VSMDemo，
在項目MainPage.xaml中，添加一個按鈕控件，
在設計主窗口左上角，選擇[Button] - > Edit Template - > Edit a Copy,編輯按鈕的默認模板，這裏會將微軟默認的按鈕控件模板代碼復制到你指定的位置，
選擇編輯後，會彈出Create Style Resource創建樣式資源的窗口，對於樣式和模板，我將在下一篇詳細講解，這裏暫不細述，請按照以下步驟繼續操作，
不用修改任何信息，點擊Ok後，在States控制面板中，就可以看到當前按鈕的視覺狀態管理列表。
如果在左邊沒有看到“States”菜單，可以進入上面的“Window”菜單，選中“States”即可顯示。
在States管理面板中，我們可以看到Button當前有兩個States，CommonStates和FocusStates,對於兩組中的視覺狀態前文已經解釋過，這裏我們需要看看菜單細節。
如果選中“Turn on transition preview”菜單，設置的Transition動畫將在主設計窗口自動播放，我們設置為Turn on，打開狀態，方便下面查看效果。
Base表示根視覺狀態，在下面分為兩個Visual States Group（視覺狀態組），每個視覺狀態組中包含不同的Visual States（視覺狀態）。點擊每個視覺狀態右邊的箭頭標識，可以添加“Visual Transitions（視覺過渡轉換）”，從上圖可看到，彈出的菜單，其中需要註意的是:
“* -> Normal” 是指任何States到Normal
“Normal -> *” 是指Normal到任何States
現在可以切換到"Objects and Timeline"，在“Template”下選中Grid，
在右邊屬性欄，修改按鈕Transform屬性，修改x，y到0.5
然後回到States控制面板，會看到Normal狀態下，按鈕控件會變小，選中MouseOver後，按鈕控件尺寸恢復正常。
Normal
MouseOver
這時，選中Normal或者MouseOver，會在主設計窗口看到按鈕變化的動畫。點擊F5運行該項目，當鼠標覆蓋按鈕的時候，按鈕會自動變化尺寸。
這樣我們就簡單的修改了Button按鈕控件的Visual States（視覺狀態）。
對於VSM需要註意的是，VSM是以代碼方式管理Visual States的類，而Blend States只是一個工具，協助開發人員管理維護Visual States，最終生成代碼，仍舊是VSM進行控制。
對於視覺管理器的快速入門暫時介紹到這裏，我們將在實例篇中再詳細介紹VSM，Blend States在實際應用中的使用方法。
Expression Blend實例中文教程(11) - 視覺管理器快速入門Visual State Manager(VSM)