概述

在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:[url]http://publish.itpub.net/msoft/2008-07-02/200807021455296.shtml[/url]


















本文轉自lihuijun51CTO博客，原文鏈接：http://blog.51cto.com/terrylee/86472?，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的谈谈Silverlight 2中的视觉状态管理 Part1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。