概述

在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中視覺狀態管理的一些基本概念，下篇文章，我們將結合實例看看如何使用視覺狀態管理來定制控件的觀感。

NET技術：談談Silverlight 2中的視覺狀態管理 Part1，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。