次の方法で共有

ページ移行

ページ切り替えは、アプリ内のページ間でユーザー間を移動し、ページ間の関係としてフィードバックを提供します。 ページ切り替えは、ユーザーがナビゲーション階層の最上位にあるか、兄弟ページ間を移動しているか、またはページ階層に深く移動しているかどうかを理解するのに役立ちます。

アプリ内のページ間のナビゲーションには、 ページ更新 と ドリルという 2 つの異なるアニメーションが用意されており、 NavigationTransitionInfo のサブクラスによって表されます。

例示

WinUI 2 ギャラリー
WinUI ギャラリー

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)を使用して、後方に移動するときに特定の画面切り替えを再生できます。

これは、画面サイズに基づいてナビゲーション動作を動的に変更する場合に便利です。たとえば、レスポンシブ リスト/詳細シナリオなどです。