談談Silverlight 2中的視覺狀態管理 Part1

概述

在WPF和Silverlight中的控制項範本支援自訂控制項的觀感，所謂的外觀，指控制項的視覺效果；而感覺則是控制項互動的響應性，如在控制項上按下滑鼠、控制項獲得焦點等狀態的改變。微軟在Silverlight 2 Beta 2中引進了一個新的概念視覺狀態管理（Visual State Manager），為我們建立互動性的控制項範本提供了極大的方便。接下來我將會用幾篇文章來介紹一下Silverlight 2中的視覺狀態管理。

在定義控制項時，我們需要嚴格區分控制項的視覺效果和控制項的邏輯，這樣當我們修改控制面板時將不會影響控制項邏輯。Silverlight 2 Beta 2中提出的組件和狀態模型，能夠很好的解決這一問題，本文我們先來看一些基本的概念。

組件（Parts）

所謂的組件（Parts）是指在空間模板中元素，控制項邏輯將會控制這些組件來完成一些特定的控制項，但它並不關心這些組件的視覺效果，如所示對於一個Silder控制項來說：

在中的Silder控制項由四個組件構成：一個名為HorizontalThumb的Thumb控制項，一個名為HorizontalLargeChangeIncrease的RepeatButton控制項，一個名為HorizontalLargeChangeDecrease的RepeatButton控制項，一個名為HorizontalTemplate的FrameworkElement元素。這些元素都將會在控制項邏輯中進行控制，如當按下HorizontalLargeChangeIncrease時滑塊將向右移動，按下HorizontalLargeChangeDecrease時滑塊將向左移動。

需要注意的一點是並不是所有的控制項都具有組件，有些控制項可能沒有組件，大家可以去查閱Silverlight 2 SDK。

視覺狀態（Visual States）

視覺狀態是指控制項定義的一系列狀態如MouseOver、Pressed等，它代表了控制項處於某一個特定的邏輯狀態。如下面這幅圖中定義的CheckBox控制項的一些視覺狀態：

預設狀態下，CheckBox控制項將顯示為Normal狀態；當CheckBox被選中時，它將顯示為Checked狀態；當Checked為null，CheckBox將顯示為Indeterminate狀態。

控制項的視覺狀態在Silverlight 2中會使用VisualState類來表示，它的定義非常簡單如下代碼所示：

public sealed class VisualState : DependencyObject{    public VisualState();    public string Name { get; }    public Storyboard Storyboard { get; set; }}

狀態遷移（State Transitions）

狀態遷移是指控制項從一個狀態過渡到另外一個狀態，如Button控制項從MouseOver狀態到Pressed狀態這個過渡過程，通過Storyboard來定義的動畫。

狀態遷移在Silverlight 2中使用VisualTransition類來表示，它的定義如下代碼所示：

public class VisualTransition{    public VisualTransition();    public Duration Duration { get; set; }    public string From { get; set; }    public Storyboard Storyboard { get; set; }    public string To { get; set; }}

狀態組（StateGroups）

狀態組，是把控制項所有互斥的狀態放在同一個組中，這樣一個狀態它只能位於一個組中，所謂的互斥是指控制項不肯能同時具有該組中的兩種狀態，如Checked和Unchecked兩個狀態不可能同時存在。以CheckBox控制項為例，我們來看一下它的狀態組：

 

從上表中我們可以看到，對於CheckBox控制項來說，它有三個狀態組：FocusStates、CommonStates、CheckStates。一個CheckBox控制項可以同時為Focused、MouseOver和Indeterminate狀態，因為它們處在不同的狀態組。現在對於這個問題：“CheckBox控制項的狀態是什嗎？”答案應該由三部分組成，分別為三個狀態組中的一個。狀態組是在Silverlight 2中提出的一個新的概念，它由VisualStateGroup類來提供，其中除了狀態組名屬性外，維護了一個視覺狀態的集合和一個狀態遷移的集合，如下代碼所示：

public sealed class VisualStateGroup : DependencyObject{    public VisualStateGroup();    public string Name { get; }    public Collection<VisualState> States { get; set; }    public Collection<VisualTransition> Transitions { get; set; }}

使用狀態組是一個非常棒的模型，在Beta 1中，CheckBox控制項有12種狀態（其中Focus在Beta 1中是作為組件而不是狀態），這12種狀態是通過CommonStates和CheckStates組合而成的，如PressedUnchecked、MouseOverChecked等，而在Beta 2中，加上FocusStates狀態，CheckBox控制項總共只有10種狀態。

控制項的狀態和狀態組是通過TemplateVisualState特性來聲明的，如在CheckBox控制項中的聲明如下代碼所示：

[TemplateVisualStateAttribute(Name = "ContentFocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Checked", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Unchecked", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Indeterminate", GroupName = "CheckStates")][TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]public class CheckBox : ToggleButton{     // ......}

視覺狀態管理器

我們再來看一下視覺狀態管理器的概念，有了上面這些概念，在Silverlight 2中視覺狀態管理是通過視覺狀態管理器（Visual State Manager）來進行的，Silverlight 2中提供了VisualStateManager類，如下所示：

public class VisualStateManager : DependencyObject{    public static DependencyProperty CustomVisualStateManagerProperty;    public VisualStateManager();    public static VisualStateManager GetCustomVisualStateManager(DependencyObject obj);    public static Collection<VisualStateGroup> GetVisualStateGroups(DependencyObject obj);    public static bool GoToState(Control control, string stateName, bool useTransitions);        protected virtual bool GoToStateCore(Control control, FrameworkElement templateRoot,         string stateName, VisualStateGroup group, VisualState state, bool useTransitions);        public static void SetCustomVisualStateManager(DependencyObject obj,         VisualStateManager value);}

視覺狀態管理器負責管理控制項的狀態和狀態組以及狀態的遷移。

狀態變化

外來事件觸發將會引起狀態的變化，進而引髮狀態遷移，整個過程如下流程圖所示：

總結

本文介紹了Silverlight 2中視覺狀態管理的一些基本概念，下篇文章，我們將結合執行個體看看如何使用視覺狀態管理來定製控制項的觀感。

本文首發於IT168:http://publish.itpub.net/msoft/2008-07-02/200807021455296.shtml