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

核心提示： 视觉状态和视觉状态管理器(VisualStateManager.xaml)<UserControl x:Class="Silverlight20.Appearance.VisualStateManager"xmlns="http://schemas.mi

视觉状态和视觉状态管理器(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 - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档
　　　　　　　　需要导入命名空间 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
　　　　　　-->
　　　　　　<ControlTemplate x:Key="vsmTestInContainer" TargetType="Button" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
　　　　　　　　<Grid>
　　　　　　　　　　<vsm:VisualStateManager.VisualStateGroups>
　　　　　　　　　　
　　　　　　　　　　　　<!--
　　　　　　　　　　　　VisualStateGroup - 视觉状态组
　　　　　　　　　　　　　　如：
　　　　　　　　　　　　　　CommonStates 组有 Normal, MouseOver, Pressed, Disabled
　　　　　　　　　　　　　　FocusStates 组有 Unfocused, Focused
　　　　　　　　　　　　　　每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态
　　　　　　　　　　　　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