SilverLigth 学习笔记--控制 Silverlight控件样式

比如我们为用户控件添加一个颜色资源：

<UserControl.Resources> <color x:Key="Green">#F722FF00</color></UserControl.Resources>

然后我们需要在定义的按钮和所画的椭圆中使用{StaticResource Keyname}去使用该资源：

<GrID x:name="LayoutRoot" Background="White"><button Height="56" WIDth="128" Content="button" borderThickness="2,2,2"><button.Background><SolIDcolorBrush color="{StaticResource Green}"/></button.Background></button><Ellipse Height="56" HorizontalAlignment="left" margin="64,176,0" VerticalAlignment="top" WIDth="112"><Ellipse.Fill><SolIDcolorBrush color="{StaticResource Green}"/></Ellipse.Fill></Ellipse></GrID>

效果如图：

样式控制

Silverlight2中支持使用样式，样式也是资源的一部分。样式使用Style标签来指定。

下面我们指定了一个针对button类型的样式：

<UserControl.Resources><Style x:Key="buttonStyle1" targettype="button"><Setter Property="Background" Value="#F722FF00" /><Setter Property="Foreground" Value="#FFFF0000"/><Setter Property="padding" Value="3"/><Setter Property="borderThickness" Value="2"/></Style></UserControl.Resources>

然后我们新添加一个button，通过使用与资源使用相同的语法来为新添加的一个button使用该样式：

<GrID x:name="LayoutRoot" Background="White"><Canvas><button WIDth="128" Height="56" Canvas.left="20" Canvas.top="20"Style="{StaticResource buttonStyle1}" Content="button1" /><button WIDth="128" Height="56" Canvas.left="20" Canvas.top="80"Style="{StaticResource buttonStyle1}" Content="button2" /></Canvas></GrID>

最终效果：

@L_502_1@ 

上面所提到的资源和样式都是写在用户控件中，只能在用户控件的范围内使用。但如果要在整个应用程序中使用，则应该将样式资源定义在Silverlight项目的App.xaml中：

<Applicationxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="StyleSample.App"><Application.Resources><!-- Resources scoped at the Application level should be defined here. --><Style x:Key="buttonStyle1" targettype="button"><Setter Property="Background" Value="#F722FF00" /><Setter Property="Foreground" Value="#FFFF0000"/><Setter Property="padding" Value="3"/><Setter Property="borderThickness" Value="2"/></Style></Application.Resources></Application>

但如果App.xaml中的样式与用户控件中的样式名称一样，用户控件中的样式会覆盖App.xaml中定义的样式。

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="StyleSample.Page"WIDth="640" Height="480"><UserControl.Resources><Style x:Key="buttonStyle1" targettype="button"><Setter Property="Foreground" Value="#FF000000"/></Style></UserControl.Resources><GrID x:name="LayoutRoot" Background="White"><Canvas><button WIDth="128" Height="56" Canvas.left="20" Canvas.top="20"Style="{StaticResource buttonStyle1}" Content="button1" /><button WIDth="128" Height="56" Canvas.left="20" Canvas.top="80"Style="{StaticResource buttonStyle1}" Content="button2" /></Canvas></GrID></UserControl>

效果如下图，可以看到按钮成了白底黑子，而不是App.xaml中的绿底红字。

视觉状态

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

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

那么，在上面的基础上又引入了视觉状态（VisualStates）和视觉状态组（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的解释，如下图。