视觉状态

视觉状态主要是将元素的逻辑与视觉呈现分离开来。它使得页面的换肤功能相对更容易。

理解视觉状态首先需要明白4个概念：部件、视觉状态、状态迁移和状态组。

• 部件 (Parts)
  部件就是控件模板中被命名的元素。程序可以根据该名称定位到这些部件并进行逻辑操作。
   
  比如上面的水印文本框， 水印就是一个部件，在焦点成为文本框时，水印将会消失。
  
• 状态 (States)
  视觉状态就是控件定义的一系列的状态，如上面水印文本框的Focus和UnFocus。
  
• 状态过渡 (Transitions)
  状态过渡就是指控件从一个状态过渡到另一个状态，如水印文本框从UnFocus状态过渡到Focus状态。在这其中可以使用Storyboard来定义动画效果。
  
• 状态组 (StateGroups)
  状态组就是将控件所有的互斥状态房子啊同一组，最终其状态由所有组中的一个状态来共同决定。
  比如还是上面的文本框，它有3个状态组：
  Common：Normal、 MouseOver、 Disabled
  Watermark：Unwatermarked、Watermarked
  Focus：UnFocused、Focused
  那么文本框的状态就必须从上面三个状态组中取一个值来定义。如没有任何操作在文本框的时候，其状态为Normal|Watermarked|UnFocused。

那么，在上面的基础上又引入了视觉状态（VisualStates）和视觉状态组（VisualStateGroups）的概念。

• 视觉状态（VisualState）
  视觉状态就是指当控件处于某一个状态的时候的视觉效果。比如一个按钮在点击之后，他的边框将会变为不同的颜色。
  
• 视觉状态组（VisualStateGroups）
  视觉状态组包括了互斥的视觉状态和所拥有的视觉状态的过渡。

通过使用视觉状态管理器（VisualStateManager）来管理视觉状态和视觉状态组，可以根据控件的逻辑改变控件的视觉效果。

更多关于视觉状态的信息，请参考 “部件与状态”模式。

下面对视觉状态所产生的XAML代码做简单说明，下面是上面例子中水印文本框中定义的视觉状态管理代码的一部分。

<Style TargetType="local:WatermarkedTextBox"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="local:WatermarkedTextBox"><Grid x:Name="Root" ><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualStateGroup.Transitions><vsm:VisualTransition GeneratedDuration="0" /></vsm:VisualStateGroup.Transitions><vsm:VisualState x:Name="Normal" /><vsm:VisualState x:Name="MouseOver" /><vsm:VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Storyboard.TargetName="DisabledVisual" 
Storyboard.TargetProperty="Opacity" To="0.5" Duration="0" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="WatermarkStates"><vsm:VisualStateGroup.Transitions><vsm:VisualTransition GeneratedDuration="0" /></vsm:VisualStateGroup.Transitions><vsm:VisualState x:Name="Unwatermarked" /><vsm:VisualState x:Name="Watermarked"><Storyboard><DoubleAnimation Storyboard.TargetName="ContentElement" 
Storyboard.TargetProperty="Opacity" To="0" Duration="0" /><DoubleAnimation Storyboard.TargetName="Watermark" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="FocusStates"><vsm:VisualStateGroup.Transitions><vsm:VisualTransition GeneratedDuration="0" /><vsm:VisualTransition To="Focused" GeneratedDuration="0:0:0.1" /></vsm:VisualStateGroup.Transitions><vsm:VisualState x:Name="Unfocused" /><vsm:VisualState x:Name="Focused"><Storyboard><DoubleAnimation Storyboard.TargetName="ContentElement" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" /><DoubleAnimation Storyboard.TargetName="Watermark" 
Storyboard.TargetProperty="Opacity" To="0" Duration="0" /><DoubleAnimation Storyboard.TargetName="FocusVisual" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups></Grid></ControlTemplate></Setter.Value></Setter></Style>

来看代码中的视觉状态组为WatermarkStates的这一部分：

<vsm:VisualStateGroup x:Name="WatermarkStates"><vsm:VisualStateGroup.Transitions><vsm:VisualTransition GeneratedDuration="0" /></vsm:VisualStateGroup.Transitions><vsm:VisualState x:Name="Unwatermarked" /><vsm:VisualState x:Name="Watermarked"><Storyboard><DoubleAnimation Storyboard.TargetName="ContentElement"                                              
Storyboard.TargetProperty="Opacity" To="0" Duration="0" /><DoubleAnimation Storyboard.TargetName="Watermark"
                                 Storyboard.TargetProperty="Opacity" To="1" Duration="0" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup>

代码最前面的vsm表示前缀，在Style中以xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"定义，表示所有以vsm开头的XAML语法所指定的属性需要在assembly为System.Windows.dll中定义过。

<vsm:VisualTransition GeneratedDuration="0" /> 定义了过渡该状态组的状态之间过渡的时间，这里设置为0，表示立即过渡到另一状态。

<vsm:VisualState x:Name="Watermarked"><Storyboard><DoubleAnimation Storyboard.TargetName="ContentElement"      
Storyboard.TargetProperty="Opacity" To="0" Duration="0" /><DoubleAnimation Storyboard.TargetName="Watermark" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0" /></Storyboard></vsm:VisualState>

Watermarked这个状态就通过Storyboard定义了一个效果，描述了在进入Watermarked状态时，其ContentElement属性文本立即变为透明（因为Duration为0），而Watermark属性则变为不透明。

综上所述可以看到，由于控件的状态需要在不同的状态组中取其互斥的一个值，然后将各个状态组中的目标状态的动画效果综合在一起，引发了在控件状态变化的时候视觉效果也发生了变化。于是我们可以通过设置一个控件模板来定义不同的样式和效果，而轻松的实现换肤功能。

 

部署

Silverlight项目的部署并不需要.NET Framework的支持，它的实际工作原理是通过HTTP将服务器上silverlight所生成的XAP压缩包发到客户端，由浏览器的silverlight插件去执行这个压缩包而绘制出最终效果。因此其部署就是完全如同Flash一般使用HTML标签中的object，然后定义好XAP包的路径就可以了。

一般来说，一个silverlight项目所编译生成的XAP包在项目文件下的bin的debug目录中：

通过在HTML中嵌入以下HTML代码，将其中的source的值改为所指定的XAP文件，就可以运行silverlight程序了。

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%"><param name="source" value="AnimationSample.xap"/><param name="onerror" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="2.0.31005.0" /><param name="autoUpgrade" value="true" /><a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" 
style="border-style: none"/></a></object>

注意上面代码中的minRuntimeVersion，他指定了运行程序所必须的最小的silverlight版本。如果不满足此条件，silverlight程序将可能不能正确运行。

而如果需要在IIS中部署silverlight程序的话，则必须要在IIS中的MIME中添加.xaml的解释，如下图。