VisualStateManager クラス
定義
重要
一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。
コントロールの表示状態とビジュアル状態間の遷移のロジックを管理します。 また、 の添付プロパティのサポート 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 : DependencyObjectPublic Class VisualStateManager
Inherits DependencyObject- 継承
- 属性
例
この例では、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 を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。
| 添付プロパティ | 説明 |
|---|---|
| VisualStateGroups | テンプレート定義のルート要素によって定義される VisualStateGroup 要素のコレクションを取得します。 通常、コントロールはテンプレートの一部としてこれを定義します。
コードでこのプロパティを取得するときは、GetVisualStateGroups を使用します。 これにより、項目を追加できるコレクション オブジェクトが返されます。 これにより、VisualStateManager.VisualStateGroups プロパティ要素の使用法の子要素の XAML 処理動作が並列化されます。 この特定の添付プロパティにはパブリック依存関係プロパティ識別子がないため、GetValue を使用してこの添付プロパティ値を取得することはできません。常に GetVisualStateGroups を使用する必要があります。 |
| CustomVisualStateManager | コントロールの状態間の遷移を処理するカスタム VisualStateManager オブジェクトを取得または設定します。
この添付プロパティは、Windows ランタイムによって実装される既定の VisualStateManager クラスではなく、カスタム実装クラスを使用してアプリのビジュアル状態の変更を処理する場合にのみ必要です。 カスタム実装を使用する予定がない場合は、このプロパティを設定する必要はありません。 |
コンストラクター
| VisualStateManager() |
VisualStateManager クラスの新しいインスタンスを初期化します。 |
プロパティ
| CustomVisualStateManagerProperty |
VisualStateManager.CustomVisualStateManager 依存関係プロパティを識別します。 |
| Dispatcher |
常に Windows アプリ SDK アプリで を返します |
| DispatcherQueue |
このオブジェクトが |
添付プロパティ
| CustomVisualStateManager |
コントロールの状態間の遷移を処理するカスタム VisualStateManager オブジェクトを取得または設定します。 |