VisualTransition 類別

定義

命名空間:

Windows.UI.Xaml

表示控制項從某個視覺狀態轉換到另一個視覺狀態時所發生的視覺行為。

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
class VisualTransition : DependencyObject

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
public class VisualTransition : DependencyObject

Public Class VisualTransition
Inherits DependencyObject

<VisualStateGroup>
  <!--one or more Visual State elements in the implicit States collection property -->
  <VisualStateGroup.Transitions>
    <VisualTransition>
      singleStoryboard
    </VisualTransition>
    <!--more transitions as above-->
  </VisualStateGroup.Transitions>
</VisualStateGroup>

繼承

Object IInspectable DependencyObject VisualTransition

屬性

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows 需求

裝置系列	Windows 10 (已於 10.0.10240.0 引進)
API contract	Windows.Foundation.UniversalApiContract (已於 v1.0 引進)

範例

本範例會建立 VisualTransition，指定當使用者將滑鼠移開控制項時，控制項的框線會變更為藍色，再變更為黃色，然後在 1.5 秒內變成黑色。

<!--Take one and a half seconds to transition from the
    PointerOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="PointerOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
                             KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
                             KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
                             KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that can be used when the control
      transitions between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to transition to the
        Pressed state.-->
    <VisualTransition To="Pressed" 
                          GeneratedDuration="0:0:0.01" />
    
    <!--Take one half second to transition to the PointerOver state.-->
    <VisualTransition To="PointerOver" 
                          GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the PointerOver state.-->
    <VisualTransition From="Pressed" To="PointerOver" 
                          GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        PointerOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="PointerOver" To="Normal" 
                          GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>

            <LinearColorKeyFrame Value="Blue" 
                               KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
                               KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
                               KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard >
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

備註

VisualTransition 是起始 分鏡腳本的行為。 此 分鏡腳本 是一個時間軸，會宣告在兩個視覺狀態之間轉換的動畫將執行的持續時間。 您可以針對起始狀態的每個組合，以不同的方式定義轉換， (From 狀態) 和結束狀態 (控制項的視覺狀態集所定義的 [到] 狀態) 。 轉換是由VisualStateGroup的Transitions屬性所定義，通常定義于 XAML 中。 大部分的預設控制項範本不會定義轉換，在此情況下，狀態之間的轉換會立即發生。 會移除舊狀態對範本的修改，並套用新狀態的修改。

VisualTransition 會參考一或兩個具名視覺狀態。 From值會參考目前狀態的狀態名稱。 To值會參考GoToState呼叫所要求之新狀態的狀態名稱。 這些名稱來自 x：Name 屬性值，這些值會套用至 VisualState，做為相同VisualStateGroup中定義一部分。 From或To是有效 VisualTransition 的必要值，缺少這些值的 VisualTransition 或使用不符合現有狀態的值不會執行任何動作。

VisualTransition 可以只參考 From 狀態、只參考 To 狀態，或是 From 和 To 狀態。 省略 From 或 To 等於任何狀態。 VisualStateManager會使用優先順序邏輯，在視覺狀態變更時套用轉換：

1. 如果 VisualTransition 存在，特別將舊狀態參考為 From ，並將新狀態參考為 To，請使用該轉換。
2. 否則，如果 VisualTransition 存在，該 VisualTransition 會特別將新狀態參考為 To ，但未指定 From，請使用該轉換。
3. 最後，如果 VisualTransition 特別參考舊狀態為 From ，但未指定 To，請使用該轉換。 如果上述任一項都不適用，則不會執行轉換。

當您呼叫 GoToState 來變更控制項的視覺狀態時， VisualStateManager 會執行下列動作：

• 如果控制項在新要求視覺狀態之前使用的 VisualState 具有 Storyboard，該分鏡腳本就會停止。
• 在這些動作之間，如果包含兩個視覺狀態的轉換存在，且GoToState所要求的具名視覺狀態有效且為新狀態，則 VisualTransition 的Storyboard會執行。
• 如果依stateName命名的VisualState有Storyboard，腳本就會開始。

VisualTransition 可以有 Storyboard 值、 GeneratedDuration 值或兩者。 但是，如果 VisualTransition 沒有 Storyboard 值或 GeneratedDuration 值，則 VisualTransition 在動畫方面不會執行任何動作，即使 From 和 To 值所命名的狀態涉及狀態變更也一樣。

隱含轉換

您可以定義 VisualTransition，使其具有 GeneratedDuration，但沒有任何特定的相依性屬性是以為目標並產生動畫效果。 這會建立隱含轉換。 任何特別以 From 或 To 視覺狀態動畫為目標的相依性屬性，因此在狀態變更之間有不同的值，然後使用產生的轉換動畫。 這個產生的動畫會使用插補，在 From 狀態值與這類屬性的 To 狀態值之間轉換。 隱含轉換動畫會持續于 GeneratedDuration所陳述的時間。

隱含轉換僅適用于 Double、 Color 或 Point 值的屬性。 換句話說，屬性必須使用DoubleAnimation、PointAnimation或ColorAnimation隱含產生動畫效果。 如果您想要在其他值上建立轉換動畫，例如需要 ObjectAnimationUsingKeyFrames的值，請將該動畫放在 Storyboard 中，並為動畫提供您想要執行的 Duration 。

根據預設，隱含轉換動畫會使用線性插補，透過 GeneratedDuration以動畫顯示值。 您可以藉由在 VisualTransition 上設定 GeneratedEasingFunction 和 GeneratedDuration ，將線性插補變更為您選擇的插補行為。

轉換動畫

有另一個設計模式和 API 可使用 C++、C# 或 Visual Basic 顯示 UWP app 的視覺轉換。 這個概念稱為 轉換動畫 ，而實作行為的類別是 主題轉換 或 主題動畫。 轉換動畫代表完整 UI 元素與整體應用程式與 UI 之間的關聯性變更，而不是在相同控制項的視覺狀態之間宣告轉換，並將變更套用至控制群組件的屬性。 例如，每當 UI 元素在其版面配置容器的 UI 座標空間中移動時，就可以套用 RepositionThemeTransition 。 許多轉換動畫都是由使用者動作起始。 轉換動畫適用于UIElement和特定衍生類別的各種Transition屬性，而不是VisualStateGroup。 轉換動畫和主題動畫通常內建至控制項的預設行為。 如需詳細資訊，請參閱視覺狀態的腳本動畫。

舊版的注意事項

Windows 8.x

針對Windows 8，XAML 主題轉換和動畫程式庫中的各種其他自動動畫行為不接受特定的 Microsoft Windows簡易存取設定，可讓使用者關閉「不必要的動畫」。

從Windows 8.1開始，主題轉換、主題動畫和視覺效果轉換都會接受 [輕鬆存取] 中[盡可能關閉所有不必要的動畫] () 設定。 動畫不會執行，而且控制項狀態變更或視覺變更是立即的。

如果您將應用程式程式碼從Windows 8移轉至Windows 8.1，建議您使用[盡可能啟用) 設定時關閉所有不必要的動畫 (來測試動畫行為。 由於其中一些動畫是由分鏡腳本控制，而且您有時會鏈結自訂動畫，以在視覺轉換或主題動畫完成之後啟動，因此 盡可能關閉所有不必要的動畫 (，) 設定可能會影響動畫的時間。 此外，如果您已將某個專案實作為視覺狀態的 VisualTransition，而不是腳本動畫，您可能會想要將其切換為真正的自訂動畫，以便 盡可能關閉所有不必要的動畫 (，) 設定不會停用它。

已針對Windows 8編譯但執行于Windows 8.1的應用程式會繼續使用主題動畫和視覺轉換的Windows 8行為。 不過，即使應用程式未重新編譯，Windows 8.1上的設定也會停用主題轉換。

建構函式

VisualTransition()

初始化 VisualTransition 類別的新實例。

屬性

Dispatcher	取得這個 物件相關聯的 CoreDispatcher 。 CoreDispatcher代表可在 UI 執行緒上存取DependencyObject的功能，即使程式碼是由非 UI 執行緒起始也一樣。 (繼承來源 DependencyObject)
From	取得或設定要轉換的來源 VisualState 名稱。
GeneratedDuration	取得或設定從某個狀態移到另一個狀態所花費的時間量，以及任何隱含轉換動畫應該在轉換行為中執行的時間。
GeneratedEasingFunction	取得或設定套用至所產生動畫的 Easing 函式。
Storyboard	取得或設定發生轉換時執行的 Storyboard 。
To	取得或設定要轉換的 VisualState 名稱。

方法

ClearValue(DependencyProperty)	清除相依性屬性的本機值。 (繼承來源 DependencyObject)
GetAnimationBaseValue(DependencyProperty)	傳回為相依性屬性建立的任何基底值，如果動畫未使用中，則適用此屬性。 (繼承來源 DependencyObject)
GetValue(DependencyProperty)	從 DependencyObject傳回相依性屬性的目前有效值。 (繼承來源 DependencyObject)
ReadLocalValue(DependencyProperty)	如果已設定本機值，則傳回相依性屬性的本機值。 (繼承來源 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	註冊通知函式，以接聽此DependencyObject實例上特定DependencyProperty的變更。 (繼承來源 DependencyObject)
SetValue(DependencyProperty, Object)	設定 DependencyObject上相依性屬性的本機值。 (繼承來源 DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	取消先前透過呼叫 RegisterPropertyChangedCallback註冊的變更通知。 (繼承來源 DependencyObject)

另請參閱

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• 快速入門：控制項範本
• 腳本動畫
• 快速入門：控制項範本
• 腳本動畫
• 視覺狀態的腳本動畫