VisualStateManager クラス

リファレンス

定義

名前空間:: Windows.UI.Xaml

重要

一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。

編集

コントロールの表示状態とビジュアル状態間の遷移のロジックを管理します。また、コントロールテンプレートの XAML でビジュアル状態を定義する方法である VisualStateManager.VisualStateGroups の添付プロパティのサポートも提供します。

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

デバイスファミリ	Windows 10 (10.0.10240.0 で導入)
API contract	Windows.Foundation.UniversalApiContract (v1.0 で導入)

例

この例では、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 を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

添付プロパティ	説明
VisualStateGroups	テンプレート定義のルート要素によって定義される VisualStateGroup 要素のコレクションを取得します。通常、コントロールはテンプレートの一部としてこれを定義します。種類: VisualStateGroup 識別子フィールド: N/A アクセサーメソッド: GetVisualStateGroups コードでこのプロパティを取得する場合は、GetVisualStateGroups を使用します。これにより、項目を追加できるコレクションオブジェクトが返されます。これにより、VisualStateManager.VisualStateGroups プロパティ要素の使用法の子要素の XAML 処理動作が並列化されます。この特定の添付プロパティにはパブリック依存関係プロパティ識別子がないため、GetValue を使用してこの添付プロパティ値を取得することはできません。常に GetVisualStateGroups を使用する必要があります。
CustomVisualStateManager	コントロールの状態間の遷移を処理するカスタム VisualStateManager オブジェクトを取得または設定します。

添付プロパティ

説明

VisualStateGroups

テンプレート定義のルート要素によって定義される VisualStateGroup 要素のコレクションを取得します。通常、コントロールはテンプレートの一部としてこれを定義します。

種類: VisualStateGroup
識別子フィールド: N/A
アクセサーメソッド: GetVisualStateGroups

コードでこのプロパティを取得する場合は、GetVisualStateGroups を使用します。これにより、項目を追加できるコレクションオブジェクトが返されます。これにより、VisualStateManager.VisualStateGroups プロパティ要素の使用法の子要素の XAML 処理動作が並列化されます。

この特定の添付プロパティにはパブリック依存関係プロパティ識別子がないため、GetValue を使用してこの添付プロパティ値を取得することはできません。常に GetVisualStateGroups を使用する必要があります。

CustomVisualStateManager

コントロールの状態間の遷移を処理するカスタム VisualStateManager オブジェクトを取得または設定します。

コンストラクター

VisualStateManager()

VisualStateManager クラスの新しいインスタンスを初期化します。

プロパティ

CustomVisualStateManagerProperty	VisualStateManager.CustomVisualStateManager 依存関係プロパティを識別します。
Dispatcher	このオブジェクトが関連付けられている CoreDispatcher を取得します。 CoreDispatcher は、コードが UI 以外のスレッドによって開始された場合でも、UI スレッド上の DependencyObject にアクセスできる機能を表します。 (継承元 DependencyObject)

添付プロパティ

CustomVisualStateManager

コントロールの状態間の遷移を処理するカスタム VisualStateManager オブジェクトを取得または設定します。

メソッド

ClearValue(DependencyProperty)	依存関係プロパティのローカル値をクリアします。 (継承元 DependencyObject)
GetAnimationBaseValue(DependencyProperty)	依存関係プロパティに対して確立された基本値を返します。これは、アニメーションがアクティブでない場合に適用されます。 (継承元 DependencyObject)
GetCustomVisualStateManager(FrameworkElement)	VisualStateManager.CustomVisualStateManager 添付プロパティの値を取得します。
GetValue(DependencyProperty)	DependencyObject から依存関係プロパティの現在の有効な値を返します。 (継承元 DependencyObject)
GetVisualStateGroups(FrameworkElement)	指定した FrameworkElement に関連付けられている VisualStateGroup オブジェクトのコレクションを取得します。
GoToState(Control, String, Boolean)	名前で新しい VisualState を要求して、2 つの状態間でコントロールを切り替えます。
GoToStateCore(Control, FrameworkElement, String, VisualStateGroup, VisualState, Boolean)	派生クラスでオーバーライドされると、状態間でコントロールが遷移します。
RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)	派生クラスでオーバーライドされると、指定した VisualStateGroup で CurrentStateChanged イベントが発生します。
RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)	派生クラスでオーバーライドされると、指定した VisualStateGroup に対して CurrentStateChanging イベントが発生します。
ReadLocalValue(DependencyProperty)	ローカル値が設定されている場合は、依存関係プロパティのローカル値を返します。 (継承元 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	この DependencyObject インスタンスの特定の DependencyProperty に対する変更をリッスンするための通知関数を登録します。 (継承元 DependencyObject)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)	VisualStateManager.CustomVisualStateManager 添付プロパティの値を設定します。
SetValue(DependencyProperty, Object)	DependencyObject の依存関係プロパティのローカル値を設定します。 (継承元 DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	RegisterPropertyChangedCallback を呼び出して以前に登録した変更通知を取り消します。 (継承元 DependencyObject)

適用対象

VisualStateManager クラス

定義

Windows の要件

例

注釈

Custom VisualStateManager

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

XAML 添付プロパティ

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

フィードバック

フィードバック

その他のリソース