VisualStateManager クラス

定義

/// [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)]
class VisualStateManager : 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)]
public class VisualStateManager : DependencyObject

Public Class VisualStateManager
Inherits DependencyObject

継承

Object IInspectable DependencyObject VisualStateManager

属性

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Windows の要件

例

この例では、VisualStateManager.VisualStateGroups XAML 添付プロパティを使用する方法を示します。 それ以外の場合、"VisualStateManager" タグが定義されていないことに注意してください。 概念的には、VisualStateManager.VisualStateGroups には、コントロール テンプレート内のテンプレート ルートの直接の子タグとして、コントロールのビジュアル状態が含まれています。

特定のビジュアル状態のセットには、"PointerOver" オブジェクトと "Normal" VisualState オブジェクトを定義する "CommonStates" と呼ばれる 1 つの VisualStateGroup が含まれています。 ユーザーが ボタンの上にポインターを置くと、 グリッド は .5 秒で緑から赤に変わります。 ユーザーがボタンからポインターを離すと、 グリッド はすぐに緑色に戻ります。

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

<common:LayoutAwarePage>
  <Grid>
...
    <VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's window size -->
      <VisualStateGroup>
        <VisualState x:Name="DefaultLayout">
           <Storyboard>
           </Storyboard>
        </VisualState>
        <VisualState x:Name="Below768Layout">
           <Storyboard>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
               Storyboard.TargetName="ContentRoot">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                   <Thickness>20,20,20,20</Thickness>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
               Storyboard.TargetName="FooterPanel">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
           </Storyboard>
         </VisualState>
       </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
   </Grid>
</common:LayoutAwarePage>

次のスニペットは、アプリがアプリ ウィンドウの幅を検出し、その情報を使用して適切なビジュアル状態を呼び出す方法を示す、XAML と共に実行するコードです。

String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind

注釈

VisualStateManager では、コントロール作成者と、コントロールにカスタム テンプレートを適用するアプリ開発者向けに、次の 2 つの重要な機能がサポートされています。

• コントロール作成者またはアプリ開発者は、 VisualStateManager.VisualStateGroups 添付プロパティを使用して、XAML のコントロール テンプレート定義のルート要素に VisualStateGroup オブジェクト要素を追加します。 VisualStateGroup 要素内では、各 VisualState はコントロールの個別のビジュアル状態を表します。 各 VisualState には、ユーザーが変更したり、コントロール ロジックによって変更したりできる UI 状態を表す名前があります。 VisualState は主に ストーリーボードで構成されます。 このストーリーボードは、コントロールがそのビジュアル状態のときに適用する必要がある個々の依存関係プロパティ値の変更を対象とします。 コード例など、XAML でビジュアル状態を記述する方法の詳細については、「 表示状態のストーリーボード化されたアニメーション」を参照してください。
• VisualStateManager の静的 GoToState メソッドを呼び出して、作成者またはアプリ開発者がこれらの状態間を切り替える制御を行います。 コントロール作成者は、コントロール ロジックが状態の変化を示すイベントを処理するとき、またはコントロール ロジックが単独で状態変更を開始するたびにこれを行います。 コントロール定義コードでは、アプリ コードではなくこれを行う方が一般的です。これにより、アプリ コードに対して考えられるすべての表示状態とその遷移とトリガー条件が既定で存在し、ロジックがコントロールによってカプセル化されます。

ほとんどの開発者は、前述のように VisualStateManager.VisualStateGroups と GoToState の 2 つの VisualStateManager API のみを使用します。 残りの API はすべて、拡張機能のサポートとカスタム VisualStateManager の作成用です。 詳細については、このトピックの「Custom VisualStateManager」セクションを参照してください。

Microsoft Visual Studio の XAML デザイン 画面で有効になっているスタイルのコピーを編集すると、既定のテンプレートのビジュアル状態は、編集する XAML で定義されます。 コントロール ロジックでは、これらの表示状態がテンプレートに存在することを想定しているため、これらの状態を削除したり、名前を変更したりしないでください。

ビジュアル状態に加えて、ビジュアル状態モデルには遷移も含まれます。 切り替えは、状態が変更されたときに各ビジュアル状態の間で発生する ストーリーボード によって制御されるアニメーション アクションです。 遷移は、コントロールの一連の表示状態によって定義される開始状態と終了状態の組み合わせごとに異なる方法で定義できます。 遷移は、プロパティ要素の構文を使用して XAML で VisualStateGroup の Transitions プロパティによって定義されます。 ほとんどの既定のコントロール テンプレートでは、遷移は定義されません。 特に定義された遷移がない場合、状態間の遷移は瞬時に (0 継続時間) 発生します。 詳細については、「 VisualTransition」を参照してください。

Custom VisualStateManager

状態間の遷移 (高度なシナリオ) 用に独自のロジックを実装する場合は、VisualStateManager から継承するクラスを作成できます。 次のガイドラインに従ってください。

• 派生クラスは、保護された GoToStateCore メソッドをオーバーライドする 必要があります。 カスタム VisualStateManager のインスタンスは、GoToState メソッドが呼び出されたときにこの Core ロジックを使用します。
• カスタム VisualStateManager クラスを参照するには、VisualStateManager.CustomVisualStateManager 添付プロパティの値を、テンプレートのビジュアル状態を定義する VisualStateManager.VisualStateGroups 添付プロパティの使用法と共に、カスタム VisualStateManager クラスの動作を使用する ControlTemplate のルート要素に設定します。 通常、 Application.Resources の既定の XAML 構築を使用して、カスタム VisualStateManager クラスのインスタンスを作成します。 次に、 VisualStateManager.CustomVisualStateManager 添付プロパティは、カスタム VisualStateManager リソースのキーへの {StaticResource} マークアップ拡張機能 参照を使用して設定されます。

これは、カスタム VisualStateManager を作成して使用するための基本的な要件です。 さらにいくつかの動作をオーバーライドすることもできます。

• VisualStateManager によって管理されている VisualStateGroup によって CurrentStateChanged イベントが発生するタイミングを制御するには、RaiseCurrentStateChanged をオーバーライドします。
• RaiseCurrentStateChanging をオーバーライドして、VisualStateManager によって管理されている VisualStateGroup によって CurrentStateChanging イベントが発生するタイミングを制御します。
• カスタム クラスで初期化に追加情報が必要な場合は、コンストラクターをオーバーライドまたはオーバーロードします。

他のすべての API (CustomVisualStateManagerProperty、 GetCustomVisualStateManager、 GetVisualStateGroups、 SetCustomVisualStateManager) は、添付プロパティのサポートのためのインフラストラクチャであり、それらを呼び出したり、それらを使用して何かを行ったりする必要はありません。

コントロールではない要素の表示状態

ビジュアル状態は、 コントロール サブクラスではない UI の一部の領域の状態を変更するシナリオに役立つことがあります。 GoToState メソッドのコントロール パラメーターには、VisualStateManager が動作するオブジェクトを参照する Control サブクラスが必要であるため、これを直接行うことはできません。 Page は Control サブクラスであり、 Page がないコンテキストや Window.Content ルートが Control サブクラスではないコンテキストで UI が表示されることはほとんどありません。 カスタム UserControl を Window.Content ルートとして定義するか、状態を適用する他のコンテンツ ( パネルなど) のコンテナーとして定義することをお勧めします。 その後、UserControl で GoToState を呼び出し、残りのコンテンツが Control であるかどうかに関係なく状態を適用できます。 たとえば、親 UserControl またはテンプレートの名前付き SwapChainPanel 部分のプロパティに適用される名前付き状態を UserControl 内に配置し、宣言されている限り、SwapChainPanel だけで構成される UI に視覚的な状態を適用できます。

XAML 添付プロパティ

VisualStateManager は、いくつかの XAML 添付プロパティのホスト サービス クラスです。

添付プロパティへの XAML プロセッサ アクセスをサポートし、同等の get 操作と set 操作をコードに公開するために、各 XAML 添付プロパティには、Get および Set アクセサー メソッドのペアがあります。 コードで値を取得または設定するもう 1 つの方法は、依存関係プロパティ システムを使用して GetValue または SetValue を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• クイック スタート: コントロール テンプレート
• ストーリーボードに設定されたアニメーション
• 表示状態用にストーリーボードに設定されたアニメーション
• 添付プロパティの概要
• XAML コントロールとアプリのスタイル設定のサンプル