VisualTransition クラス

定義

/// [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 の要件

例

次の使用例は、ユーザーがマウスをコントロールから離したときに、コントロールの境界線が青に変わり、次に黄色に変わり、1.5 秒で黒に変わることを指定する VisualTransition を作成します。

<!--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 では何も行われません。

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

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

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

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

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

暗黙の移行

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

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

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

切り替えアニメーション

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

以前のバージョンの注意事項

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 の設定によって無効になります。

コンストラクター

プロパティ

メソッド

適用対象

こちらもご覧ください

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• クイック スタート: コントロール テンプレート
• ストーリーボードに設定されたアニメーション
• クイック スタート: コントロール テンプレート
• ストーリーボードに設定されたアニメーション
• 表示状態用にストーリーボードに設定されたアニメーション