概述

在WPF和Silverlight中的控件模板支持自定義控件的觀感，所謂的外觀，指控件的視覺效果；而感覺則是控件交互的響應(yīng)性，如在控件上按下鼠標(biāo)、控件獲得焦點(diǎn)等狀態(tài)的改變。微軟在Silverlight 2 Beta 2中引進(jìn)了一個(gè)新的概念視覺狀態(tài)管理（Visual State Manager），為我們創(chuàng)建交互性的控件模板提供了極大的方便。接下來我將會(huì)用幾篇文章來介紹一下Silverlight 2中的視覺狀態(tài)管理。

在定義控件時(shí)，我們需要嚴(yán)格區(qū)分控件的視覺效果和控件的邏輯，這樣當(dāng)我們修改控件外觀時(shí)將不會(huì)影響控件邏輯。Silverlight 2 Beta 2中提出的部件和狀態(tài)模型，能夠很好的解決這一問題，本文我們先來看一些基本的概念。

部件（Parts）

所謂的部件（Parts）是指在空間模板中元素，控件邏輯將會(huì)控制這些部件來完成一些特定的控件，但它并不關(guān)心這些部件的視覺效果，如下圖所示對(duì)于一個(gè)Silder控件來說：

在上圖中的Silder控件由四個(gè)部件構(gòu)成：一個(gè)名為HorizontalThumb的Thumb控件，一個(gè)名為HorizontalLargeChangeIncrease的RepeatButton控件，一個(gè)名為HorizontalLargeChangeDecrease的RepeatButton控件，一個(gè)名為HorizontalTemplate的FrameworkElement元素。這些元素都將會(huì)在控件邏輯中進(jìn)行控制，如當(dāng)按下HorizontalLargeChangeIncrease時(shí)滑塊將向右移動(dòng)，按下HorizontalLargeChangeDecrease時(shí)滑塊將向左移動(dòng)。

需要注意的一點(diǎn)是并不是所有的控件都具有部件，有些控件可能沒有部件，大家可以去查閱Silverlight 2 SDK。

視覺狀態(tài)（Visual States）

視覺狀態(tài)是指控件定義的一系列狀態(tài)如MouseOver、Pressed等，它代表了控件處于某一個(gè)特定的邏輯狀態(tài)。如下面這幅圖中定義的CheckBox控件的一些視覺狀態(tài)：

默認(rèn)狀態(tài)下，CheckBox控件將顯示為Normal狀態(tài)；當(dāng)CheckBox被選中時(shí)，它將顯示為Checked狀態(tài)；當(dāng)Checked為null，CheckBox將顯示為Indeterminate狀態(tài)。

控件的視覺狀態(tài)在Silverlight 2中會(huì)使用VisualState類來表示，它的定義非常簡(jiǎn)單如下代碼所示：

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

狀態(tài)遷移（State Transitions）

狀態(tài)遷移是指控件從一個(gè)狀態(tài)過渡到另外一個(gè)狀態(tài)，如Button控件從MouseOver狀態(tài)到Pressed狀態(tài)這個(gè)過渡過程，通過Storyboard來定義的動(dòng)畫。

狀態(tài)遷移在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; }}

狀態(tài)組（StateGroups）

狀態(tài)組，是把控件所有互斥的狀態(tài)放在同一個(gè)組中，這樣一個(gè)狀態(tài)它只能位于一個(gè)組中，所謂的互斥是指控件不肯能同時(shí)具有該組中的兩種狀態(tài)，如Checked和Unchecked兩個(gè)狀態(tài)不可能同時(shí)存在。以CheckBox控件為例，我們來看一下它的狀態(tài)組：

從上表中我們可以看到，對(duì)于CheckBox控件來說，它有三個(gè)狀態(tài)組：FocusStates、CommonStates、CheckStates。一個(gè)CheckBox控件可以同時(shí)為Focused、MouseOver和Indeterminate狀態(tài)，因?yàn)樗鼈兲幵诓煌臓顟B(tài)組?，F(xiàn)在對(duì)于這個(gè)問題：“CheckBox控件的狀態(tài)是什么？”答案應(yīng)該由三部分組成，分別為三個(gè)狀態(tài)組中的一個(gè)。狀態(tài)組是在Silverlight 2中提出的一個(gè)新的概念，它由VisualStateGroup類來提供，其中除了狀態(tài)組名屬性外，維護(hù)了一個(gè)視覺狀態(tài)的集合和一個(gè)狀態(tài)遷移的集合，如下代碼所示：

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

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

控件的狀態(tài)和狀態(tài)組是通過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{     // ......}

視覺狀態(tài)管理器

我們?cè)賮砜匆幌乱曈X狀態(tài)管理器的概念，有了上面這些概念，在Silverlight 2中視覺狀態(tài)管理是通過視覺狀態(tài)管理器（Visual State Manager）來進(jìn)行的，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);}

視覺狀態(tài)管理器負(fù)責(zé)管理控件的狀態(tài)和狀態(tài)組以及狀態(tài)的遷移。

狀態(tài)變化

外部事件觸發(fā)將會(huì)引起狀態(tài)的變化，進(jìn)而引發(fā)狀態(tài)遷移，整個(gè)過程如下流程圖所示：

總結(jié)

本文介紹了Silverlight 2中視覺狀態(tài)管理的一些基本概念，下篇文章，我們將結(jié)合實(shí)例看看如何使用視覺狀態(tài)管理來定制控件的觀感。

NET技術(shù)：談?wù)凷ilverlight 2中的視覺狀態(tài)管理 Part1，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。