次の方法で共有


VisualStateManager クラス

定義

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

/// [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 VisualStateManager : DependencyObject
[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 VisualStateManager : DependencyObject
Public Class VisualStateManager
Inherits DependencyObject
継承
Object IInspectable DependencyObject VisualStateManager
属性

この例では、XAML 添付プロパティを使用する方法を VisualStateManager.VisualStateGroups 示します。 それ以外の場合、"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 つの重要な機能がサポートされています。

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

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

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

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

カスタム VisualStateManager

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

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

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

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

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

コントロールではない要素の視覚的な状態

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

XAML 添付プロパティ

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

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

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

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

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

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

この添付プロパティは、Windows ランタイムによって実装される既定の VisualStateManager クラスではなく、カスタム実装クラスを使用してアプリのビジュアル状態の変更を処理する場合にのみ必要です。 カスタム実装を使用する予定がない場合は、このプロパティを設定する必要はありません。

コンストラクター

VisualStateManager()

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

プロパティ

CustomVisualStateManagerProperty

VisualStateManager.CustomVisualStateManager 依存関係プロパティを識別します。

Dispatcher

常に Windows アプリ SDK アプリで を返しますnull。 代わりに DispatcherQueue を使用してください。

(継承元 DependencyObject)
DispatcherQueue

このオブジェクトが DispatcherQueue 関連付けられている を取得します。 は DispatcherQueue 、コードが 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)

適用対象

こちらもご覧ください