VisualStateManager用於管理控件的狀態以及用於狀態過渡的邏輯，一般放在controltemplate里面。
xmal中：
<
templateRoot
>
< VisualStateManager.VisualStateGroups >
oneOrMoreVisualStateGroups
</ VisualStateManager.VisualStateGroups >
</ templateRoot >
< VisualStateManager.VisualStateGroups >
oneOrMoreVisualStateGroups
</ VisualStateManager.VisualStateGroups >
</ templateRoot >
一個<VisualStateManager>的結構如下：
------------------------------------------------------------------------------------------------------------------------------------
<VisualStateManager.VisualStateGroups> 狀態組組合
<VisualStateGroup> 設置單個的狀態組
<VisualStateGroup.Transitions> 設置單個的狀態組里不同狀態切換時的動畫時間
<VisualState> 設置單個的狀態的動畫效果
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
-------------------------------------------------------------------------------------------------------------------------------------
以下的例子創建了一個VisualStateManager，里面包含了3種狀態情形（VisualState：Normal，Mouseover，Pressed）
此外創建了一個button引用這個，當鼠標放在這個button上時，button會變大，當鼠標按下這個button時，button顏色會改變
xmal中：
代碼
<
UserControl
x:Class
="VisualStateManager_Sample.MainPage"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable ="d"
d:DesignHeight ="300" d:DesignWidth ="400" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< Grid.Resources >
<!-- Style-包含-ControlTemplate- 包含-VisualStateManager -->
< Style x:Key ="ButtonTemplate" TargetType ="Button" >
< Setter Property ="Template" >
< Setter.Value >
< ControlTemplate TargetType ="Button" >
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable ="d"
d:DesignHeight ="300" d:DesignWidth ="400" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< Grid.Resources >
<!-- Style-包含-ControlTemplate- 包含-VisualStateManager -->
< Style x:Key ="ButtonTemplate" TargetType ="Button" >
< Setter Property ="Template" >
< Setter.Value >
< ControlTemplate TargetType ="Button" >
<!--設置控件的Width，Height，Opacity，BorderThickness-->
< Border x:Name ="Button_RootElement" Width ="500" Height ="100" Opacity ="1" BorderThickness ="2" >
< VisualStateManager.VisualStateGroups >
<!-- VisualStateGroup - 視覺狀態組，包含CommonStates和FocusStates
CommonStates 包括： Normal, MouseOver, Pressed, Disabled四個VisualState
FocusStates 包括： Unfocused, Focused兩個VisualState -->
< VisualStateGroup x:Name ="CommonStates" >
<!-- 設置視覺狀態組改變時的動畫時間 -->
< VisualStateGroup.Transitions >
<!-- Take 0.3 second from Normal state to trasition to the MouseOver state. -->
< VisualTransition From ="Normal" To ="MouseOver" GeneratedDuration ="0:0:0.3" />
<!-- Take 0.2 second from MouseOver state to trasition to the Normal state. -->
< VisualTransition From ="MouseOver" To ="Normal" GeneratedDuration ="0:0:0.2" />
<!-- Take 0.2 second from MouseOver state to trasition to the Pressed state. -->
< VisualTransition From ="MouseOver" To ="Pressed" GeneratedDuration ="0:0:0.2" />
<!-- Take 0.2 second from Pressed state to trasition to the MouseOver state. -->
< VisualTransition From ="Pressed" To ="MouseOver" GeneratedDuration ="0:0:0.2" />
</ VisualStateGroup.Transitions >
<!-- 3個VisualState，第一個VisualState為Normal -->
< VisualState x:Name ="Normal" />
< Border x:Name ="Button_RootElement" Width ="500" Height ="100" Opacity ="1" BorderThickness ="2" >
< VisualStateManager.VisualStateGroups >
<!-- VisualStateGroup - 視覺狀態組，包含CommonStates和FocusStates
CommonStates 包括： Normal, MouseOver, Pressed, Disabled四個VisualState
FocusStates 包括： Unfocused, Focused兩個VisualState -->
< VisualStateGroup x:Name ="CommonStates" >
<!-- 設置視覺狀態組改變時的動畫時間 -->
< VisualStateGroup.Transitions >
<!-- Take 0.3 second from Normal state to trasition to the MouseOver state. -->
< VisualTransition From ="Normal" To ="MouseOver" GeneratedDuration ="0:0:0.3" />
<!-- Take 0.2 second from MouseOver state to trasition to the Normal state. -->
< VisualTransition From ="MouseOver" To ="Normal" GeneratedDuration ="0:0:0.2" />
<!-- Take 0.2 second from MouseOver state to trasition to the Pressed state. -->
< VisualTransition From ="MouseOver" To ="Pressed" GeneratedDuration ="0:0:0.2" />
<!-- Take 0.2 second from Pressed state to trasition to the MouseOver state. -->
< VisualTransition From ="Pressed" To ="MouseOver" GeneratedDuration ="0:0:0.2" />
</ VisualStateGroup.Transitions >
<!-- 3個VisualState，第一個VisualState為Normal -->
< VisualState x:Name ="Normal" />
<!-- Change the button Width and Height when the mouse is over the button.
分別設置Button_RootElement下的Width和Height屬性，鼠標放在button上時，button會變大 -->
< VisualState x:Name ="MouseOver" >
< Storyboard >
< DoubleAnimation Storyboard.TargetName ="Button_RootElement"
Storyboard.TargetProperty ="Width" To ="600" />
< DoubleAnimation Storyboard.TargetName ="Button_RootElement"
Storyboard.TargetProperty ="Height" To ="120" />
</ Storyboard >
</ VisualState >
<!-- Change the BackgroundBrush背景色, BackgroundBrush邊框色, Opacity when the button is pressed. -->
< VisualState x:Name ="Pressed" >
< Storyboard >
< DoubleAnimation Storyboard.TargetName ="Button_RootElement"
Storyboard.TargetProperty ="Opacity" To ="0.8" />
< ColorAnimation Storyboard.TargetName ="BackgroundBrush"
Storyboard.TargetProperty ="Color" To ="LightSkyBlue" />
< ColorAnimation Storyboard.TargetName ="BorderBrush"
Storyboard.TargetProperty ="Color" To ="Blue" />
</ Storyboard >
</ VisualState >
</ VisualStateGroup >
</ VisualStateManager.VisualStateGroups >
<!-- 內容設置. -->
< ContentPresenter
HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} "
VerticalAlignment =" {TemplateBinding VerticalContentAlignment} " />
<!-- 背景色設置. -->
< Border.Background >
< SolidColorBrush x:Name ="BackgroundBrush" Color ="Gray" />
</ Border.Background >
<!-- 邊框顏色設置. -->
< Border.BorderBrush >
< SolidColorBrush x:Name ="BorderBrush" Color ="Black" />
</ Border.BorderBrush >
</ Border >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
</ Grid.Resources >
<!-- button引用ButtonTemplate模板. -->
< Button Style =" {StaticResource ButtonTemplate} "
HorizontalAlignment ="Center" VerticalAlignment ="Center"
Content ="I'm a Button" />
</ Grid >
</ UserControl >
界面如下（由於是截屏，鼠標不可見）
1)button初始化時
2）鼠標在button時
3）當鼠標點擊時
