ページ切り替えは、アプリ内のページ間でユーザー間を移動し、ページ間の関係としてフィードバックを提供します。 ページ切り替えは、ユーザーがナビゲーション階層の最上位にあるか、兄弟ページ間を移動しているか、またはページ階層に深く移動しているかどうかを理解するのに役立ちます。
アプリ内のページ間のナビゲーションには、 ページ更新 と ドリルという 2 つの異なるアニメーションが用意されており、 NavigationTransitionInfo のサブクラスによって表されます。
例示
WinUI 2 ギャラリー | |
---|---|
![]() |
WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開 、ページ切り替えの動作を確認します。 |
ページの更新
ページ更新は、スライド アップ アニメーションと、受信コンテンツのフェード イン アニメーションの組み合わせです。 タブ間や左ナビゲーション項目間の移動など、ユーザーがナビゲーション スタックの一番上に移動する場合は、ページ更新を使用します。
望ましい気持ちは、ユーザーがやりなおしたということです。
ページ更新アニメーションは 、EntranceNavigationTransitionInfoClass によって表されます。
// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());
注: フレーム は自動的に NavigationThemeTransition を使用して、2 つのページ間のナビゲーションをアニメーション化します。 既定では、アニメーションはページ更新です。
ドリル
アイテムを選択した後に詳細情報を表示するなど、ユーザーがアプリに深く移動するときにドリルを使用します。
望ましい気持ちは、ユーザーがアプリに深く入り込んだということです。
ドリル アニメーションは DrillInNavigationTransitionInfo クラスによって表されます。
// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());
水平スライド
水平スライドを使用して、兄弟ページが隣り合って表示されることを示します。 NavigationView コントロールでは、トップ ナビゲーションにこのアニメーションが自動的に使用されますが、独自の水平ナビゲーション エクスペリエンスを構築する場合は、SlideNavigationTransitionInfo を使用して水平スライドを実装できます。
望ましい気持ちは、ユーザーが隣り合っているページ間を移動しているということです。
// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );
// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );
抑制する
ナビゲーション中にアニメーションが再生されないようにするには、他の NavigationTransitionInfo サブタイプの代わりに SuppressNavigationTransitionInfo を使用します。
// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());
アニメーションの非表示は、接続されたアニメーションまたは暗黙的な表示/非表示 アニメーション を使用して独自の切り替えを作成する場合に便利です。
後方ナビゲーション
Frame.GoBack(NavigationTransitionInfo)
を使用して、後方に移動するときに特定の画面切り替えを再生できます。
これは、画面サイズに基づいてナビゲーション動作を動的に変更する場合に便利です。たとえば、レスポンシブ リスト/詳細シナリオなどです。
関連トピック
- 2 つのページ間の移動
- UWP アプリの アニメーション
Windows developer