silverlight:Silverlight(12) - 2.0外观的样式 模板 视觉状态和视觉状态管理器

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　在线DEMO

　　http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

　　举例

　　1、样式(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　　　　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　　　　　 x:Class="Silverlight20.App"
　　　　　　 >
　　<Application.Resources>
　　
　　　　<!--全局样式 - 任何地方都可引用-->
　　　　<!--
　　　　Style - 自定义样式资源用于修改Control控件样式各个Control控件默认样式可参见文档
　　　　　　x:Key - 唯标识
　　　　　　TargetType - 目标对象类型
　　　　　　Setter - 属性设置器
　　　　　　　　Property - 需要设置属性名称
　　　　　　　　Value - 需要设置属性值
　　　　-->
　　　　<Style x:Key="styleTestApp" TargetType="TextBox">
　　　　　　<Setter Property="FontSize" Value="24"/>
　　　　　　<Setter Property="Foreground" Value="#0000FF"/>
　　　　</Style>
　　
　　</Application.Resources>
</Application>

　　样式(Style.xaml)

<UserControl x:Class="Silverlight20.Appearance.Style"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<StackPanel.Resources>
　　　　
　　　　　　<!--容器内样式 - 所属容器内可引用-->
　　　　　　<!--
　　　　　　Style - 自定义样式资源用于修改Control控件样式各个Control控件默认样式可参见文档
　　　　　　　　x:Key - 唯标识
　　　　　　　　TargetType - 目标对象类型
　　　　　　　　Setter - 属性设置器
　　　　　　　　　　Property - 需要设置属性名称
　　　　　　　　　　Value - 需要设置属性值
　　　　　　-->
　　　　　　<Style x:Key="styleTestInContainer" TargetType="TextBox">
　　　　　　　　<Setter Property="FontSize" Value="24"/>
　　　　　　　　<Setter Property="Foreground" Value="#00FF00"/>
　　　　　　</Style>
　　　　　　
　　　　</StackPanel.Resources>
　　
　　　　<!--全局样式应用-->
　　　　<TextBox Text="我是TextBox(全局样式应用)" Margin="5" Style="{StaticResource styleTestApp}" />
　　
　　　　<!--容器内样式应用-->
　　　　<TextBox Text="我是TextBox(容器内样式应用)" Margin="5" Style="{StaticResource styleTestInContainer}" />
　　　　
　　　　<!--内联样式应用内联样式优先级高于全局样式和容器内样式-->
　　　　<TextBox Text="我是TextBox(内连样式应用)" Margin="5" Foreground="#FF0000"　Style="{StaticResource styleTestInContainer}" />
　　　　
　　</StackPanel>
</UserControl>

　　2、模板(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　　　　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　　　　　 x:Class="Silverlight20.App"
　　　　　　 >
　　<Application.Resources>
　　
　　　　<!--全局模板 - 任何地方都可引用-->
　　　　<!--
　　　　ControlTemplate - 自定义Control控件模板用于修改Control控件外观各个Control控件默认模板可参见文档
　　　　　　x:Key - 唯标识
　　　　　　TargetType - 目标对象类型
　　　　ContentPresenter - 用于显示继承自 .Windows.Controls.ContentControl Control控件内容
　　　　TemplateBinding - 绑定到所指定属性名称
　　　　-->
　　　　<ControlTemplate x:Key="templateTestApp" TargetType="Button">
　　　　　　<Border BorderBrush="Red" BorderThickness="1">
　　　　　　　　<Grid Background="{TemplateBinding Background}">
　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　</Grid>
　　　　　　</Border>
　　　　</ControlTemplate>
　　
　　</Application.Resources>
</Application>

　　模板(Template.xaml)

<UserControl x:Class="Silverlight20.Appearance.Template"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<StackPanel.Resources>
　　
　　　　　　<!--容器内模板 - 所属容器内可引用-->
　　　　　　<!--
　　　　　　ControlTemplate - 自定义Control控件模板用于修改Control控件外观各个Control控件默认模板可参见文档
　　　　　　　　x:Key - 唯标识
　　　　　　　　TargetType - 目标对象类型
　　　　　　ContentPresenter - 用于显示继承自 .Windows.Controls.ContentControl Control控件内容
　　　　　　TemplateBinding - 绑定到所指定属性名称
　　　　　　-->
　　　　　　<ControlTemplate x:Key="templateTestInContainer" TargetType="Button">
　　　　　　　　<Border BorderBrush="Red" BorderThickness="1">
　　　　　　　　　　<Grid Background="{TemplateBinding Background}">
　　　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　　　</Grid>
　　　　　　　　</Border>
　　　　　　</ControlTemplate>
　　
　　　　　　<!--样式内设置模板 - 指定了样式即指定了样式内模板-->
　　　　　　<Style x:Key="templateTestInStyle" TargetType="Button">
　　　　　　　　<Setter Property="Template">
　　　　　　　　　　<Setter.Value>
　　　　　　　　　　　　<ControlTemplate TargetType="Button">
　　　　　　　　　　　　　　<Border BorderBrush="Red" BorderThickness="1">
　　　　　　　　　　　　　　　　<Grid Background="{TemplateBinding Background}">
　　　　　　　　　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　　　　　　　　　</Grid>
　　　　　　　　　　　　　　</Border>
　　　　　　　　　　　　</ControlTemplate>
　　　　　　　　　　</Setter.Value>
　　　　　　　　</Setter>
　　　　　　</Style>
　　
　　　　</StackPanel.Resources>
　　
　　　　<!--全局模板应用-->
　　　　<Button Width="200" Margin="5" Content="我是Button(全局模板应用)" Background="Yellow" Template="{StaticResource templateTestApp}" />
　　
　　　　<!--容器内模板应用-->
　　　　<Button Width="200" Margin="5" Content="我是Button(容器内模板应用)" Background="Yellow" Template="{StaticResource templateTestInContainer}" />
　　
　　　　<!--样式内模板应用-->
　　　　<Button Width="200" Margin="5" Content="我是Button(样式内模板应用)" Background="Yellow" Style="{StaticResource templateTestInStyle}" />
　　
　　　　<!--内联式模板应用-->
　　　　<Button Width="200" Margin="5" Content="我是Button(样式内模板应用)">
　　　　　　<Button.Template>
　　　　　　　　<ControlTemplate>
　　　　　　　　　　<Border BorderBrush="Red" BorderThickness="1">
　　　　　　　　　　　　<Grid Background="Yellow">
　　　　　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　　　　　</Grid>
　　　　　　　　　　</Border>
　　　　　　　　</ControlTemplate>
　　　　　　</Button.Template>
　　　　</Button>
　　</StackPanel>
</UserControl>

　　3、视觉状态和视觉状态管理器(App.xaml)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　　　　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　　　　　 x:Class="Silverlight20.App"
　　　　　　 >
　　<Application.Resources>
　　
　　　　<!--全局视觉状态 - 任何地方都可引用-->
　　　　<!--
　　　　VisualStateManager - 视觉状态管理器用来管理视觉状态各个Control控件默认视觉状态可参见文档
　　　　　　需要导入命名空间 xmlns:vsm="clr-:.Windows;assembly=.Windows"
　　　　-->
　　　　<ControlTemplate x:Key="vsmTestApp" TargetType="Button" xmlns:vsm="clr-:.Windows;assembly=.Windows">
　　　　　　<Grid>
　　　　　　　　<vsm:VisualStateManager.VisualStateGroups>
　　
　　　　　　　　　　<!--
　　　　　　　　　　VisualStateGroup - 视觉状态组
　　　　　　　　　　　　如:
　　　　　　　　　　　　CommonStates 组有 Normal, MouseOver, Pressed, Disabled
　　　　　　　　　　　　FocusStates 组有 Unfocused, Focused
　　　　　　　　　　　　每个视觉状态组取个视觉状态值就构成了Control控件视觉状态
　　　　　　　　　　x:Name - 视觉状态所属组别名称
　　　　　　　　　　-->
　　　　　　　　　　<vsm:VisualStateGroup x:Name="CommonStates">
　　
　　　　　　　　　　　　<!--
　　　　　　　　　　　　VisualState - 配置视觉状态
　　　　　　　　　　　　　　x:Name - 所属视觉状态组内指定视觉状态名称
　　　　　　　　　　　　-->
　　　　　　　　　　　　<vsm:VisualState x:Name="MouseOver">
　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　<ColorAnimation
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetName="borderBrush"
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="Color"
　　　　　　　　　　　　　　　　　　　　To="Green"
　　　　　　　　　　　　　　　　　　　　Duration="0:0:3" />
　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　</vsm:VisualState>
　　
　　　　　　　　　　　　<vsm:VisualState x:Name="Normal" />
　　
　　　　　　　　　　　　<!--
　　　　　　　　　　　　VisualStateGroup.Transitions - 所属视觉状态组内状态转换配置
　　　　　　　　　　　　　　From - 转换前视觉状态名称
　　　　　　　　　　　　　　To - 转换后视觉状态名称
　　　　　　　　　　　　　　GeneratedDuration - 个状态转换到另个状态所需时间
　　　　　　　　　　　　-->
　　　　　　　　　　　　<vsm:VisualStateGroup.Transitions>
　　　　　　　　　　　　　　<vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3">
　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　<ColorAnimation
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetName="borderBrush"
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="Color"
　　　　　　　　　　　　　　　　　　　　To="Red"
　　　　　　　　　　　　　　　　　　　　Duration="0:0:3" />
　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　</vsm:VisualTransition>
　　　　　　　　　　　　</vsm:VisualStateGroup.Transitions>
　　
　　　　　　　　　　</vsm:VisualStateGroup>
　　　　　　　　</vsm:VisualStateManager.VisualStateGroups>
　　
　　　　　　　　<Border x:Name="border" BorderThickness="10">
　　　　　　　　　　<Border.BorderBrush>
　　　　　　　　　　　　<SolidColorBrush x:Name="borderBrush" Color="Red" />
　　　　　　　　　　</Border.BorderBrush>
　　　　　　　　　　<Grid Background="{TemplateBinding Background}">
　　　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　　　</Grid>
　　　　　　　　</Border>
　　　　　　</Grid>
　　　　</ControlTemplate>
　　
　　</Application.Resources>
</Application>

　　视觉状态和视觉状态管理器(VisualStateManager.xaml)

<UserControl x:Class="Silverlight20.Appearance.VisualStateManager"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<StackPanel.Resources>
　　
　　　　　　<!--容器内视觉状态 - 所属容器内可引用-->
　　　　　　<!--
　　　　　　VisualStateManager - 视觉状态管理器用来管理视觉状态各个Control控件默认视觉状态可参见文档
　　　　　　　　需要导入命名空间 xmlns:vsm="clr-:.Windows;assembly=.Windows"
　　　　　　-->
　　　　　　<ControlTemplate x:Key="vsmTestInContainer" TargetType="Button" xmlns:vsm="clr-:.Windows;assembly=.Windows">
　　　　　　　　<Grid>
　　　　　　　　　　<vsm:VisualStateManager.VisualStateGroups>
　　　　　　　　　　
　　　　　　　　　　　　<!--
　　　　　　　　　　　　VisualStateGroup - 视觉状态组
　　　　　　　　　　　　　　如:
　　　　　　　　　　　　　　CommonStates 组有 Normal, MouseOver, Pressed, Disabled
　　　　　　　　　　　　　　FocusStates 组有 Unfocused, Focused
　　　　　　　　　　　　　　每个视觉状态组取个视觉状态值就构成了Control控件视觉状态
　　　　　　　　　　　　x:Name - 视觉状态所属组别名称
　　　　　　　　　　　　-->
　　　　　　　　　　　　<vsm:VisualStateGroup x:Name="CommonStates">
　　　　　　　　　　　　
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　VisualState - 配置视觉状态
　　　　　　　　　　　　　　　　x:Name - 所属视觉状态组内指定视觉状态名称
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<vsm:VisualState x:Name="MouseOver">
　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　<ColorAnimation
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetName="borderBrush"
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="Color"
　　　　　　　　　　　　　　　　　　　　To="Green"
　　　　　　　　　　　　　　　　　　　　Duration="0:0:3" />
　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　</vsm:VisualState>
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<vsm:VisualState x:Name="Normal" />
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　VisualStateGroup.Transitions - 所属视觉状态组内状态转换配置
　　　　　　　　　　　　　　　　From - 转换前视觉状态名称
　　　　　　　　　　　　　　　　To - 转换后视觉状态名称
　　　　　　　　　　　　　　　　GeneratedDuration - 个状态转换到另个状态所需时间
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<vsm:VisualStateGroup.Transitions>
　　　　　　　　　　　　　　　　<vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3">
　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　<ColorAnimation
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetName="borderBrush"
　　　　　　　　　　　　　　　　　　　　Storyboard.TargetProperty="Color"
　　　　　　　　　　　　　　　　　　　　To="Red"
　　　　　　　　　　　　　　　　　　　　Duration="0:0:3" />
　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　</vsm:VisualTransition>
　　　　　　　　　　　　　　</vsm:VisualStateGroup.Transitions>
　　
　　　　　　　　　　　　</vsm:VisualStateGroup>
　　　　　　　　　　</vsm:VisualStateManager.VisualStateGroups>
　　
　　　　　　　　　　<Border x:Name="border" BorderThickness="10">
　　　　　　　　　　　　<Border.BorderBrush>
　　　　　　　　　　　　　　<SolidColorBrush x:Name="borderBrush" Color="Red" />
　　　　　　　　　　　　</Border.BorderBrush>
　　　　　　　　　　　　<Grid Background="{TemplateBinding Background}">
　　　　　　　　　　　　　　<ContentPresenter HorizontalAlignment="Right" />
　　　　　　　　　　　　</Grid>
　　　　　　　　　　</Border>
　　　　　　　　</Grid>
　　　　　　</ControlTemplate>
　　　　　　
　　　　</StackPanel.Resources>
　　
　　　　<!--全局视觉状态应用-->
　　　　<Button Content="我是Button(全局视觉状态应用)" Margin="5" Background="Yellow" Template="{StaticResource vsmTestApp}" />
　　
　　　　<!--容器内视觉状态应用-->
　　　　<Button Content="我是Button(容器内视觉状态应用)" Margin="5" Background="Yellow" Template="{StaticResource vsmTestInContainer}" />
　　
　　</StackPanel>
</UserControl>



　　OK

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(23):Silverlight和HTML混合的无窗口模式