Silverlight - 視覺化狀態

如果使用者能夠分辨出應用程式的哪個部分可能響應輸入，那就太好了。在某種程度上，這可以透過使按鈕看起來像按鈕來實現。如果某些東西看起來可點選，它可能就是可點選的。

然而，現代使用者介面設計的慣例是，使用者介面元素還應該透過在滑鼠移動到它們上方時改變其外觀來表示其響應意願。

例如，內建的按鈕控制元件在滑鼠移動到其上方時會稍微改變其背景，以暗示它是互動式的，然後在點選時進一步改變其外觀，使其看起來像是被選中了。幾乎所有控制元件都需要這樣做，而設計師需要一種方法來建立和編輯動畫以實現這一點。

狀態和狀態組

讓我們來看一個視覺化狀態實際應用的例子。考慮一個複選框。它可以是未選中或選中狀態，如果需要，它還可以支援第三種不確定狀態。該控制元件需要在這三種情況下顯示不同的外觀。因此，我們有三種視覺化狀態。

為了表明它已準備好響應使用者輸入，複選框在滑鼠移動到其上方時會稍微改變其外觀，並在滑鼠懸停在其上方時會進一步改變其外觀。如果複選框被停用，則需要考慮第四種狀態，它會呈現出灰顯狀態，並表明它不會響應使用者輸入。

所以，這裡我們還有另外四種狀態。在任何給定時間，複選框的視覺化狀態必須是**普通、滑鼠懸停、選中**或**停用**之一。同時，它必須是**選中、未選中**或**不確定**之一。

視覺化狀態管理器

由於其模板定義了控制元件的外觀，因此模板需要定義每個視覺化狀態會發生什麼。到目前為止，我們看到的模板不包含此類資訊。因此，無論控制元件的當前狀態如何，控制元件的外觀都保持靜態。

要向模板新增視覺化狀態，您可以從新增屬性元素開始。

對於視覺化狀態處理，您可以做的最簡單的事情是定義一個動畫，該動畫將在控制元件進入特定狀態時執行。
控制元件在其狀態發生變化時會通知視覺化狀態管理器類。
然後，視覺化狀態管理器會在模板的這一部分查詢並確定要執行哪個動畫。
因此，當複選框進入滑鼠懸停狀態時，此動畫將執行，從而更改模板某些部分的顏色。

讓我們來看一個簡單的例子，使用視覺化狀態機制為複選框建立一個自定義模板，以反映狀態變化。

以下是帶有**視覺化狀態**的複選框自定義模板的 XAML 程式碼。

<UserControl 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   x:Class = "CheckboxVisualState.Page" 
   Width = "640" Height="480" 
   xmlns:vsm = "clrnamespace:System.Windows;assembly = System.Windows" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <UserControl.Resources> 
      <ControlTemplate x:Key = "CheckBoxControlTemplate1" TargetType = "CheckBox"> 
	
         <Grid> 
		
            <vsm:VisualStateManager.VisualStateGroups> 
			
               <vsm:VisualStateGroup x:Name = "FocusStates"> 
                  <vsm:VisualState x:Name = "ContentFocused"/> 
                  <vsm:VisualState x:Name = "Focused"/> 
                  <vsm:VisualState x:Name = "Unfocused"/>
               </vsm:VisualStateGroup> 
				
               <vsm:VisualStateGroup x:Name = "CommonStates"> 
				
                  <vsm:VisualStateGroup.Transitions> 
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/> 
                  </vsm:VisualStateGroup.Transitions> 
					
                  <vsm:VisualState x:Name = "MouseOver"> 
					
                     <Storyboard>
						
                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background" 
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)"> 
									
                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFFF0000"/> 
                        </ColorAnimationUsingKeyFrames> 
							
                     </Storyboard> 
						
                  </vsm:VisualState>
					
                  <vsm:VisualState x:Name = "Pressed"> 
					
                     <Storyboard>
						
                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background" 
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)"> 
									
                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFCEFF00"/> 
                        </ColorAnimationUsingKeyFrames>
							
                     </Storyboard> 
						
                  </vsm:VisualState>
					
                  <vsm:VisualState x:Name = "Disabled"/> 
                  <vsm:VisualState x:Name = "Normal"/> 
					
               </vsm:VisualStateGroup> 
				
               <vsm:VisualStateGroup x:Name = "CheckStates">
				
                  <vsm:VisualStateGroup.Transitions> 
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/> 
                  </vsm:VisualStateGroup.Transitions> 
					
                  <vsm:VisualState x:Name = "Checked">
					
                     <Storyboard> 
						
                        <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "checkPath" 
                           Storyboard.TargetProperty = "(UIElement.Opacity)"> 
									
                              <SplineDoubleKeyFrame KeyTime = "00:00:00" Value = "1"/> 
                        </DoubleAnimationUsingKeyFrames> 
							
                     </Storyboard> 
						
                  </vsm:VisualState> 
					
                  <vsm:VisualState x:Name = "Unchecked"/> 
                  <vsm:VisualState x:Name = "Indeterminate"/> 
					
               </vsm:VisualStateGroup> 
				
            </vsm:VisualStateManager.VisualStateGroups> 
			
            <Grid.ColumnDefinitions> 
			
               <ColumnDefinition Width = "Auto"/> 
                  <ColumnDefinition Width = "3.61782296696066"/> 
               <ColumnDefinition Width = "Auto"/> 
				
            </Grid.ColumnDefinitions> 
			
            <Canvas Height = "50" HorizontalAlignment = "Left" VerticalAlignment = "Top" 
               Width = "50">
				
               <Rectangle Height = "33.746" x:Name = "background" Width = "33.746" 
                  Canvas.Left = "8.452" Canvas.Top = "7.88" Fill = "#FFFFFFFF" 
                  Stroke = "#FF000000" 
                  RadiusX = "5.507" RadiusY = "5.507"/> 
						
               <Path Height = "40.25" x:Name = "checkPath" Width = "39.75" Opacity = "0" 
                  Canvas.Left = "5.959" Canvas.Top = "7.903" Stretch = "Fill" 
                  Stroke = "#FF1F9300" StrokeThickness = "3" 
                  Data = "M1.5,1.5 C15.495283,8.7014561 27.056604,18.720875 33.75,33.75 
                  M36,3.75 C22.004717,10.951456 10.443395,20.970875 3.7499986,36"/> 
						
            </Canvas> 
				
            <ContentPresenter HorizontalAlignment = "Left" 
               Margin = "{TemplateBinding Padding}" 
               VerticalAlignment = "{TemplateBinding VerticalContentAlignment}" 
               Grid.Column = "2" Grid.ColumnSpan = "1" d:LayoutOverrides = "Height"/>
					
         </Grid> 
		
      </ControlTemplate> 
	
   </UserControl.Resources> 
 
   <Grid x:Name = "LayoutRoot" Background = "White" > 
      <CheckBox HorizontalAlignment = "Left" 
         Margin = "52.5410003662109,53.5970001220703,0,0" VerticalAlignment = "Top" 
         Template = "{StaticResource CheckBoxControlTemplate1}" 
         Content = "CheckBox"/> 
   </Grid>
	
</UserControl>

編譯並執行上述程式碼後，您將看到以下網頁，其中包含一個**複選框**。

當游標進入複選框區域時，它將更改狀態。

單擊**複選框**時，您將看到以下狀態。

我們建議您執行上述示例以更好地理解。

列印頁面