ページ切り替え効果
ページ切り替えは、アプリ内のページ間でユーザー間を移動し、ページ間の関係としてフィードバックを提供します。 ページ切り替えは、ユーザーがナビゲーション階層の最上位にあるか、兄弟ページ間を移動しているか、またはページ階層に深く移動しているかどうかを理解するのに役立ちます。
アプリ内のページ間のナビゲーションには、 Page refresh と Drill の 2 つの異なるアニメーションが用意されており、 NavigationTransitionInfo のサブクラスによって表されます。
例
| WinUI 2 ギャラリー | |
|---|---|
 |
WinUI 2 Gallery アプリがインストールされている場合は、ここをクリックしてアプリを開き、ページ切り替えの動作を確認します。 |
ページの更新
ページ更新は、スライド アップ アニメーションと、受信コンテンツのフェード イン アニメーションの組み合わせです。 タブ間や左ナビゲーション項目間の移動など、ユーザーがナビゲーション スタックの一番上に移動する場合は、ページ更新を使用します。
望ましい気持ちは、ユーザーがやりなおしたということです。
ページ更新アニメーションは、 EntranceNavigationTransitionInfoClass によって表されます。
// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());
注: Frame では、 NavigationThemeTransition を自動的に使用して、2 つのページ間のナビゲーションをアニメーション化します。 既定では、アニメーションはページ更新です。
Drill
アイテムを選択した後に詳細情報を表示するなど、ユーザーがアプリに深く移動するときにドリルを使用します。
望ましい気持ちは、ユーザーがアプリに深く入り込んだということです。
ドリル アニメーションは、 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 } );
Suppress
ナビゲーション中にアニメーションを再生しないようにするには、他の NavigationTransitionInfo サブタイプの代わりに SuppressNavigationTransitionInfo を使用します。
// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());
アニメーションの非表示は、 Connected Animations または暗黙的な表示/非表示アニメーションを使用して独自の遷移を作成する場合に便利です。
後方ナビゲーション
Frame.GoBack(NavigationTransitionInfo)を使用して、後方に移動するときに特定の画面切り替えを再生できます。
これは、たとえば応答性の高いリスト/詳細シナリオなど、画面サイズに基づいて移動動作を動的に変更する場合に役立ちます。
関連トピック
Windows developer