VisualStateManager クラス

定義

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

属性

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

この例では、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する ControlTemplate のVisualStateManager.CustomVisualStateManagerルート要素に添付プロパティの値を、テンプレートの表示状態を定義する添付プロパティの使用法と共VisualStateManager.VisualStateGroupsに設定します。 通常、Application.Resources で既定の XAML 構築を使用して、カスタム VisualStateManager クラスのインスタンスを作成します。 その後、VisualStateManager.CustomVisualStateManager添付プロパティは、カスタム VisualStateManager リソースのキーへの {StaticResource} マークアップ拡張参照を使用して設定されます。

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

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

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

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

ビジュアル状態は、 すぐには Control サブクラスではない UI の一部の領域の状態を変更するシナリオに役立つことがあります。 GoToState メソッドのコントロール パラメーターにはサブクラスが必要Controlであるため、これを直接行うことはできません。これは、VisualStateManager が動作するオブジェクトを参照します。 Page は Control サブクラスであり、 がないコンテキスト 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 を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

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