VisualTransition クラス

定義

/// [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>

継承

Object IInspectable DependencyObject VisualTransition

属性

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

次の使用例は、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は、ストーリーボードを開始する動作です。 このストーリーボードは、2 つのビジュアル状態間で切り替わるアニメーションが実行される期間を宣言するタイムラインです。 遷移は、コントロールの一連のビジュアル状態によって定義される開始状態 ( From 状態) と終了状態 ( To 状態) の組み合わせごとに異なる方法で定義できます。 遷移は VisualStateGroup の Transitions プロパティによって定義され、通常は XAML で定義されます。 ほとんどの既定のコントロール テンプレートでは遷移は定義されません。この場合、状態間の遷移は瞬時に行われます。 テンプレートに対する古い状態の変更が削除され、新しい状態の変更が適用されます。

は VisualTransition 、1 つまたは 2 つの名前付きビジュアル状態を参照します。 From 値は、現在の状態である状態の名前を参照します。 To 値は、GoToState 呼び出しによって要求された新しい状態である状態の名前を参照します。 これらの名前は、同じ VisualStateGroup 内の定義の一部として VisualState に適用される x:Name 属性の文字列値から取得されます。 From または To は、有効な VisualTransition に必要な値です。これらの値のいずれかが不足しているか、既存の状態と一致しない値を使用する VisualTransition では何も行われません。

では VisualTransition 、 From 状態、 To 状態、または From 状態と To 状態の両方を参照できます。 [開始] または [To] を省略すると、任意の状態に相当します。 VisualStateManager では、ビジュアル状態が変化するたびに遷移を適用する優先順位ロジックが使用されます。

1. 特に古い状態を VisualTransitionFrom として参照し、新しい状態を To として参照する が存在する場合は、その遷移を使用します。
2. それ以外の場合は、特に新しい状態を To として参照し、From を指定しない が存在する場合VisualTransitionは、その遷移を使用します。
3. 最後に、古い状態を VisualTransition 特に From として参照し、 To を指定しない が存在する場合は、その遷移を使用します。

上記のいずれも適用されない場合、遷移は実行されません。

GoToState を呼び出してコントロールの表示状態を変更すると、VisualStateManager は次のアクションを実行します。

• 新しく要求されたビジュアル状態の前にコントロールが使用していた VisualState に ストーリーボードがある場合、そのストーリーボードは停止します。
• これらのアクションの間で、2 つのビジュアル状態を含む遷移が存在し、GoToState によって要求された名前付きビジュアル状態が有効であり、新しい状態である場合、実行のストーリーボードVisualTransition。
• によって名前付けされた stateNameVisualState にストーリーボードがある場合は、ストーリーボードが開始されます。

にはVisualTransition、ストーリーボード値、GeneratedDuration 値、またはその両方を指定できます。 ただし、 VisualTransition に値も値もないStoryboardGeneratedDuration場合、VisualTransitionFrom 値と To 値によって名前が付けられた状態が状態の変更に関係している場合でも、アニメーションの観点からは何も行いません。

暗黙の移行

GeneratedDuration を含むが、特定の依存関係プロパティが対象とアニメーション化されないように定義VisualTransitionできます。 これにより、暗黙的な遷移が作成されます。 From またはTo のいずれかのビジュアル状態でアニメーションを対象としているため、状態の変化に応じて異なる値を持つ依存関係プロパティは、生成された遷移アニメーションを使用します。 この生成されたアニメーションは、補間を使用して、このようなプロパティの From 状態値と To 状態値の間で遷移します。 暗黙的な切り替えアニメーションは、 GeneratedDuration によって示された時間の間続きます。

暗黙的な遷移は、 Double、 Color 、または Point の値であるプロパティにのみ適用されます。 つまり、DoubleAnimation、PointAnimation、ColorAnimation を使用して暗黙的にアニメーション化するには、 プロパティを使用できる必要があります。 他の値 ( ObjectAnimationUsingKeyFrames を必要とする値など) に切り替えアニメーションを作成する場合は、そのアニメーションを ストーリーボード に配置し、アニメーションに実行する 期間 を指定します。

既定では、暗黙的な遷移アニメーションは線形補間を使用して GeneratedDuration を介して値をアニメーション化します。 GeneratedEasingFunctionGeneratedDuration と を に設定することで、線形補間を任意の補間動作にVisualTransition変更できます。

画面切り替えアニメーション

C++ または C# を使用してアプリの視覚的な画面切り替えを表示するためのもう 1 つの設計パターンと API があります。 この概念は 切り替えアニメーション と呼ばれ、動作を実装するクラスは テーマの切り替え または テーマ アニメーションです。 同じコントロールのビジュアル状態間の遷移を宣言し、ビジュアル状態と同様にコントロール パーツのプロパティに変更を適用するのではなく、遷移アニメーションは、完全な UI 要素とアプリと UI 全体の関係の変化を表します。 たとえば、レイアウト コンテナーの UI 座標空間で UI 要素が移動されるたびに適用できる 、RepositionThemeTransition があります。 画面切り替えアニメーションの多くは、ユーザー アクションによって開始されます。 切り替えアニメーションは、VisualStateGroup ではなく、UIElement および特定の派生クラスのさまざまな Transition プロパティに適用されます。 画面切り替えアニメーションとテーマ アニメーションは、多くの場合、コントロールの既定の動作に組み込まれています。

コンストラクター

プロパティ

メソッド

適用対象

こちらもご覧ください

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• コントロール テンプレート
• ストーリーボードに設定されたアニメーション