ページ切り替え効果

XAML コントロール ギャラリー
XAML コントロールギャラリーXAML controls gallery

XAML コントロールギャラリーアプリがインストールされている場合は、ここをクリックしてアプリを開き、動作中のページの切り替え効果を確認します。

ページの更新

ページの更新は、受信したコンテンツのスライド アップ アニメーションとフェード イン アニメーションの組み合わせです。 ページの更新は、ユーザーがナビゲーション スタックの最上位に移動したときに使用します (タブ間や左側のナビゲーションの項目間の移動など)。

ユーザーが処理を開始したという意識を持てるようにします。

ページの更新のアニメーション

ページ更新アニメーションは、 EntranceNavigationTransitionInfoClassによって表されます。

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

: フレームは自動的に 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

ナビゲーション中にアニメーションの再生を回避するには、SuppressNavigationTransitionInfo を他の NavigationTransitionInfo サブタイプの代わりに使用します。

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

アニメーションの抑制は、接続型アニメーションまたは暗黙的な表示/非表示アニメーションを使用して独自の切り替え効果を作成している場合に役立ちます。

後方ナビゲーション

Frame.GoBack(NavigationTransitionInfo) を使用して逆方向に移動するときに特定の切り替え効果を再生することができます。

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

ページ切り替え効果により、ユーザーがアプリ内のページ間を移動するため、ページ間の関係がフィードバックされます。 ページ切り替え効果により、ナビゲーション階層の最上位にいるのか、兄弟ページ間を移動しているのか、またはページ階層をより深く移動しているのかを、ユーザーが理解しやすくなります。

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

使用例