视觉状态

2017-08-30 19:06:23来源:CSDN作者:qq_20935555人点击

分享
第七城市

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

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

  • 部件 (Parts)
    部件就是控件模板中被命名的元素。程序可以根据该名称定位到这些部件并进行逻辑操作。
    Magical Snap - 2008.12.03 18.21 - 005 
    比如上面的水印文本框, 水印就是一个部件,在焦点成为文本框时,水印将会消失。
  • 状态 (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目录中:

Magical Snap - 2008.12.04 13.12 - 001

通过在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的解释,如下图。
kaka 
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台