視覺狀態是指控件的某些特定狀態的外觀，如MouseOver、Focused、Unfocused、Normal等等。在這些狀態中有一些狀態是不可同時存在的，我們將這種互斥的狀態划分為同一個組，稱之為視覺狀態組。同理多個視覺狀態組之間的狀態是可以共存的。
VisualStateManager是視覺狀態管理器，其內部包含多個視覺狀態組
VisualStateGroup是視覺狀態組，內部包含多個互斥的視覺狀態
VisualStateGroup.Transitions是視覺狀態改變定義,GeneratedDuration是狀態改變時間，From是從什么狀態,To是到什么狀態
VisualState是視覺狀態，定義名字，內部是在狀態改變時對控件外觀的修正改變。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" To="MouseOver"/>
<VisualTransition GeneratedDuration="0:0:0.5" To="Normal"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="Root" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
我們可以通過在后台代碼“轉到定義”的方式去查看該控件的視覺狀態，如下圖可以查看到CheckBox的眾多視覺狀態，以及視覺狀態組：
接上節實例，我希望能夠讓ScrollViewer的滾動條在鼠標未移動到其上面的時候隱藏起來的效果。現在就通過視覺狀態組來實現這個效果。
A.首先我們用Blend打開上節實例，然后右鍵點擊ScrollViewer控件-->"編輯模板"-->"編輯副本"，如下圖：
B.然后我們在彈出的窗口中為此樣式重新命名，並且定位位置選擇為"應用程序",如下圖：
C.創建完畢之后我們選擇對應的ScrollBar控件。
D.然后右鍵點擊"VerticalScrollBar"重復以上A、B動作獲取到垂直和水平方向的ScrollBar樣式副本，此時我們首先選擇Normal視圖，然后點擊Scrollbar出現其屬性，在外觀處設置其Opacity屬性值為10%,如下圖：
E.設置過度*-->Normal為0.5秒漸變，如下圖：
F.同理設置*-->MouseOver視圖為0.5秒漸變即可達到所需效果，其垂直滾動條達到效果：
如需源碼請點擊SLVisualStateGroup.zip 下載。