<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>