概述
在WPF和Silverlight中的控件模板支持自定义控件的观感，所谓的外观，指控件的视觉效果；而感觉则是控件交互的响应性，如在控件上按下鼠标、控件获得焦点等状态的改变。微软在Silverlight 2 Beta 2中引进了一个新的概念视觉状态管理（Visual State Manager），为我们创建交互性的控件模板提供了极大的方便。接下来我将会用几篇文章来介绍一下Silverlight 2中的视觉状态管理。
在定义控件时，我们需要严格区分控件的视觉效果和控件的逻辑，这样当我们修改控件外观时将不会影响控件逻辑。Silverlight 2 Beta 2中提出的部件和状态模型，能够很好的解决这一问题，本文我们先来看一些基本的概念。
部件（Parts）
在上图中的Silder控件由四个部件构成：一个名为HorizontalThumb的Thumb控件，一个名为HorizontalLargeChangeIncrease的RepeatButton控件，一个名为HorizontalLargeChangeDecrease的RepeatButton控件，一个名为HorizontalTemplate的FrameworkElement元素。这些元素都将会在控件逻辑中进行控制，如当按下HorizontalLargeChangeIncrease时滑块将向右移动，按下HorizontalLargeChangeDecrease时滑块将向左移动。
需要注意的一点是并不是所有的控件都具有部件，有些控件可能没有部件，大家可以去查阅Silverlight 2 SDK。
视觉状态（Visual States）
默认状态下，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）
状态迁移在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种状态。
[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,VisualStateGroup group,VisualState state,bool useTransitions); public static void SetCustomvisualstatemanager(DependencyObject obj,visualstatemanager value); }
视觉状态管理器负责管理控件的状态和状态组以及状态的迁移。
状态变化
外部事件触发将会引起状态的变化，进而引发状态迁移，整个过程如下流程图所示：
总结
本文介绍了Silverlight 2中视觉状态管理的一些基本概念，下篇文章，我们将结合实例看看如何使用视觉状态管理来定制控件的观感。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。