談談Silverlight 2中視覺狀態管理第一部分

　　在WPF和Silverlight中的控件模板支持自定義控件的觀感所謂的外觀指控件的視覺效果而感覺則是控件交互的響應性如在控件上按下鼠標控件獲得焦點等狀態的改變微軟在Silverlight Beta 中引進了一個新的概念視覺狀態管理（Visual State Manager）為我們創建交互性的控件模板提供了極大的方便接下來我將會用幾篇文章來介紹一下Silverlight 中的視覺狀態管理

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

　　部件（Parts）

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

　　

　　

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

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

　　視覺狀態（Visual States）

　　視覺狀態是指控件定義的一系列狀態如MouseOverPressed等它代表了控件處於某一個特定的邏輯狀態如下面這幅圖中定義的CheckBox控件的一些視覺狀態

　　

　　

　　默認狀態下CheckBox控件將顯示為Normal狀態當CheckBox被選中時它將顯示為Checked狀態當Checked為nullCheckBox將顯示為Indeterminate狀態

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

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

　　狀態遷移（State Transitions）

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

　　

　　

　　狀態遷移在Silverlight 中使用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控件來說它有三個狀態組FocusStatesCommonStatesCheckStates一個CheckBox控件可以同時為FocusedMouseOver和Indeterminate狀態因為它們處在不同的狀態組現在對於這個問題

　　CheckBox控件的狀態是什麼？答案應該由三部分組成分別為三個狀態組中的一個狀態組是在Silverlight 中提出的一個新的概念它由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 中CheckBox控件有種狀態（其中Focus在Beta 中是作為部件而不是狀態）這種狀態是通過CommonStates和CheckStates組合而成的如PressedUncheckedMouseOverChecked等而在Beta 中加上FocusStates狀態CheckBox控件總共只有種狀態

　　控件的狀態和狀態組是通過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 中視覺狀態管理是通過視覺狀態管理器（Visual State Manager）來進行的Silverlight 中提供了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 中視覺狀態管理的一些基本概念下篇文章我們將結合實例看看如何使用視覺狀態管理來定制控件的觀感  　

From:http://tw.wingwit.com/Article/program/net/201311/12255.html