Visual State Manager (VSM-视觉状态管理器) 之支持

　　Silverlight 和 WPF中的控件模板支持对控件的“look（外观）”，以及控件的“feel（感觉）”的定制。“feel”之谓，我指的是改变它交互的响应性。例如，在按下时，得到焦点时，失去焦点时，处于按下的状态时，处于不可用（disabled）状态时，内中有东西被选中时。。。，它是如何反应的。经常地，在用户象这样与控件做交互时，你要执行动画效果。

　　我们在Silverlight 2 Beta2中引进的一个新东西是"Visual State Manager（视觉状态管理器）" (VSM)，该功能将极大地方便你建造交互性的控件模板。VSM引入了你可在控件模板中利用的2个基本概念："视觉状态(Visual States)" 和 "状态迁移（State Transitions）"。例如，象按钮这样的控件为自己定义了多个视觉状态： "Normal（正常）", "MouseOver（鼠标之下）", "Pressed（按下）", "Disabled（不可用）", "Focused（获取焦点）", "Unfocused（不具焦点）"。在Blend中的模板编辑模式下，设计师现在可以轻松地编辑按钮在每个特定状态下的外观，以及设置迁移规则来控制从一个状态迁移到另一个状态时动画效果应该运行的时间。然后在运行时，Silverlight会动态地运行合适的动画故事板来把控件从一个状态平滑地过渡到另一个状态。

　　这个模型很棒的地方是，设计师不用编写代码，不用手工创建动画故事板，也不用理解控件的对象模型就可以非常有效率。这使得学习创建交互性控件模板的曲线非常容易，意味着现有的美工可以轻松地参与Silverlight项目。今年稍后，我们还将往WPF中添加"Visual State Manager（视觉状态管理器）" (VSM)的支持，让你在Windows应用中使用同样的方法，以及在 WPF 和 Silverlight 项目间共享控件模板。

　要看这个的实战例子，让我们往设计表面上加一个Button控件：

　　然后，我们可以右击按钮控件，编辑它的控件模板。我们将不从现有的默认控件模板开始（就象上面的Slider例子一样），让我们创建一个空白的控件模板，从头做起：

　　Blend会提示我们给要创建的样式（Style）资源取一个名字，我们将它取名为“ScottButton”，点击OK。这会把设计器置于按钮的控件编辑模式下，一开始只有一个空白的控件模板：

　　上面有一样需要注意的东西是，在Blend中有一个新的“States（状态）”窗口，这个窗口会显示Button控件提供的所有的“Visual States（视觉状态）”。在上面，当前被选中的是“Base(基底)”状态，该状态允许我们定义我们的按钮控件模板常用的视觉树。

　　然后，我们可以往我们的基底状态中加一些矢量元素，来定义象下面这样的定制按钮的外观。我们可以使用由Blend提供的内置矢量绘制工具支持来设计这些图形，或者使用Expression Design 或 Adobe Illustrator来建造矢量图形，然后将其导入Blend中。下面，我们在我们的控件模板中加了4个“Path”元素，一个是带圆角的背景（其名为“background”），另一个带阴影（drop shadow）（其名为“shadow”），还有一个是带40%蔽光性的“shine”（在顶部加了一些晕光），再有一个定义了默认的内部内容（在这个情形下，是个房子的图案）：

　　注：我们也可以导入一个图片，但使用矢量元素会给予我们以后对按钮进行扩缩/转换，在任意分辨率或尺度上保持清晰观感的灵活性（特别是在Silverlight移动设备的场景下，屏幕的分辨率大不相同或较小时，尤其有用），还允许我们对美工设计中的任何矢量元素可以轻易地做动画效果或改动。

　　完成设计上面的基底状态之后，我们可以按F5在浏览器中运行应用：

　　你可以在上面看到，我们的按钮控件现在拥有一个比较好看的外观。尽管它有了一个新的外观，但按钮依然象以前那样触发同样的焦点，点击，和悬浮事件，所以，使用按钮的开发人员在操作使用了我们的新控件模板的按钮时，不用改动任何代码。

　　但我们的新按钮控件模板的一个缺点是，它并不是交互的。这意味着，如果按钮获得/失去焦点，或者鼠标悬浮其上时，我得不到任何视觉反馈。点击时，我也得不到很好的按下/弹起的动画效果。

　　要将交互性加到我们的按钮上，我们将回到Blend中，再次操作我们按钮的控件模板。之前我们把矢量图形元素加到了我们按钮的“Base（基底）”状态中，这允许我们定义所有视觉状态的默认视觉外观。我们现在将回去，进一步定制个别的按钮视觉状态。

　　例如，为实现按钮的mouse-over行为，我们可以在“States”窗口中选择“MouseOver”状态，然后细调按钮处于该状态时的外观。在下面，我选了控件模板中的“shine”矢量元素，调整它在属性网格中的Opacity属性，使其在MouseOver状态下可见度更高。注意Blend是如何在对象窗口中，自动使用红点加亮“shine”元素，然后在该元素的下面列出了Opacity属性的。这可以便利很快地跟踪我们在控件模板中在“Base（基底）”状态和“MouseOver”状态间所做的所有变动：

　　然后，我们可以在“States”窗口中选择“Pressed”状态，定制按钮处于按下状态时的外观。我们将改变“Base（基底）”状态的2样东西，第一个变动是使得“shine”元素可见（就象MouseOver状态一样），第二个变动是稍微偏移按钮控件的内容，同时保持影子元素不动。这会给予按钮一个很好看的“depressed（按下)”外观，与它的基底视觉形成很好的反差：

　　我们可以这样来实现偏移变动： 在设计器中选择background，content和shine元素，然后在属性浏览器中对它们施加一个偏移显示转换（offset render transform）：

　　现在，在浏览器中再次运行我们的应用的话，我们会发现我们的按钮在使用时有交互的视觉反馈了。下面是我们按钮的“Normal（正常）”外观：

　　将鼠标悬浮于按钮之上，会造成象下面这样的发光效果：

　　点击按钮会导致它按下去，隐藏影子（在松开鼠标按钮时，它会弹回来）：

　　注意，我们不用编写任何代码或XAML来改变我们按钮的观感，新的视觉状态管理器功能会自动地为我们处理视觉状态间的过渡。

　　在默认情形下，在你从一个视觉状态移动到另一个视觉状态时，Silverlight会动态地为你构建和运行过渡Storyboard（提供了2个状态间的平滑过渡动画效果），你不需编写任何代码就可以让这一切发生（注：如果你想的话，你还是能降低层次（drop down），加一个定制的Storyboard过渡，但在大多数情形下，你大概可以使用自动的Storyboard过渡）。

　　Silverlight的自动过渡功能中你可以利用的一个特性是，定制视觉状态过渡发生所花的时间，你可以这么做，点击视觉状态右边的箭头，设置一个规则来控制当从一个特定状态移到另一个状态时，过渡动画效果应该运行的时间。

　　例如，我们可以加如下的规则来表示，我们要它花0.2秒钟的时间来从"Normal"过渡到"MouseOver"视觉状态：

　　然后，我们可以象这样来配置这个规则，在Normal->MouseOver间过渡时花0.2秒钟：

　　然后，我们可以点击"MouseOver"状态，设置一个规则，导致从MouseOver->Normal的过渡花0.4秒钟：

　　现在，当我们重新运行应用时，对MouseOver场景，我们将有一个慢了一点的动画过渡，给我们的应用添加了一种稍微更加平滑和更为精致的感觉。我们不用编写一行代码就可以促成这个效果。 随Silverlight 2发布的所有控件都有对象上面这样的控件模板和视觉状态管理器之定制的内置支持。

　　想进一步了解新的视觉状态管理器和控件模板编辑功能的话，请看一下 这里 和 这里的教程, 以及这里, 这里 和 这里的相关录像。