VisualTransition 類別
定義
重要
部分資訊涉及發行前產品,在發行之前可能會有大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。
表示當控制項從一個視覺狀態轉換成另一個視覺狀態時所發生的視覺行為。
/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualTransition : DependencyObject
[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
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>
- 繼承
- 屬性
範例
本範例會建立 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呼叫所要求之新狀態的狀態名稱。 這些名稱來自在相同VisualStateGroup中套用至VisualState之定義的x:Name 屬性值。
From或To是有效 VisualTransition 的必要值,其中一個缺少這些值的 VisualTransition,或使用不符合現有狀態的值不會執行任何動作。
VisualTransition
可以只參考From狀態、只參考To狀態,或同時參考 From和To狀態。 省略 From 或 To 等於任何狀態。 每當視覺狀態變更時, VisualStateManager 會使用優先順序邏輯來套用轉換:
-
VisualTransition
如果 存在,特別將舊狀態參考為From,而新狀態為To,請使用該轉換。 - 否則,如果
VisualTransition
存在,特別將新狀態參考為 To ,但未指定 From,請使用該轉換。 - 最後,如果
VisualTransition
存在特別將舊狀態參考為 From ,但未指定 To,請使用該轉換。
如果上述任一項都不適用,則不會執行任何轉換。
當您呼叫 GoToState 來變更控制項的視覺狀態時, VisualStateManager 會執行下列動作:
- 如果控制項在新要求視覺狀態之前使用的 VisualState 具有 分鏡腳本,該分鏡腳本就會停止。
- 在這些動作之間,如果涉及兩個
VisualTransition
視覺狀態的轉換存在,且GoToState所要求的具名視覺狀態有效且為新狀態,則執行腳本的分鏡腳本。 - 如果所命名
stateName
的VisualState具有分鏡腳本,腳本就會開始。
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建立值動畫效果。 您可以藉由在 上設定 GeneratedEasingFunction 以及 GeneratedDuration
, VisualTransition
將線性插補變更為您選擇的插補行為。
轉換動畫
有另一個設計模式和 API,可用於使用 C++ 或 C# 顯示應用程式的視覺轉換。 這個概念稱為 轉換動畫 ,而實作行為的類別是 主題轉換 或 主題動畫。 轉換動畫代表完整 UI 元素與整體應用程式與 UI 之間的關聯性變更,而不是在相同控制項的視覺狀態之間宣告轉換,並將變更套用至控制群組件的屬性。 例如,每當 UI 元素在其版面配置容器的 UI 座標空間中移動時,就可以套用 RepositionThemeTransition 。 許多轉換動畫都是由使用者動作所起始。 轉換動畫適用于UIElement和特定衍生類別的各種Transition屬性,而不是VisualStateGroup。 轉換動畫和主題動畫通常是內建至控制項的預設行為。
建構函式
VisualTransition() |
初始化 VisualTransition 類別的新實例。 |
屬性
Dispatcher |
一律會在 |
DispatcherQueue |
|
From |
取得或設定要從中轉換之 VisualState 的名稱。 |
GeneratedDuration |
取得或設定從某個狀態移至另一個狀態所需的時間,以及任何隱含轉換動畫應該在轉換行為中執行的時間量。 |
GeneratedEasingFunction |
取得或設定套用至所產生動畫的 easing 函式。 |
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) |