言語: HTML | XAML

エッジに基づく UI のアニメーション化 (XAML)

Applies to Windows only

エッジに基づく UI のアニメーションは、画面のエッジ (端) を起点とする UI の表示と非表示を切り替えるときに使います。この UI は、ユーザーが表示することも、アプリで表示することもできます。EdgeUIThemeTransition は、アプリ バーやコマンド バーのような小さめのエッジ UI に使います。PaneThemeTransition は、スライドするウィンドウやパネルのような大きめの UI に使います。これらのアニメーションは、主にカスタム コントロールで使います。AppBarCommandBar のような既にあるコントロールは、エッジ UI 用のライブラリ アニメーションが組み込まれているため、UI にコントロールを含めるだけでアニメーション動作が実行されます。

UI は、アプリの手前に表示するか、メイン アプリ サーフェスの一部として表示することができます。メイン アプリ サーフェスの一部として表示する場合は、そのアプリの残りの部分のサイズを調整し、新しい UI を表示したときのためにスペースを確保する必要があります。

端に基づく要素の基本的な図

エッジに基づく要素には、それぞれ独自のアニメーション API を使った、エッジ UI とウィンドウ UI の 2 種類があります。

  • 動作が AppBarCommandBar などに似ているカスタム コントロールをアニメーション化することが目的の場合は、小さめの端に基づく UI でエッジ UI アニメーションを使います。また、アプリ内の操作が原因となったエラーと警告を表示する UI サーフェスまたは領域を定義することもできます。このシナリオに対処している場合は、「ポップアップのガイドライン」を読んでください。自分のシナリオでは端に基づく UI が適切でない可能性があります。
  • 端に基づく UI の中でも比較的大きく、アプリ ウィンドウを広く占有するものには、ウィンドウ UI のアニメーションを使います。ここで話題にしているサイズのウィンドウの一例は、ソフト キーボードです。

エッジ UI とウィンドウ UI の大きさの違いを示す図

既定の Windows ランタイム コントロール動作における端に基づくアニメーション

XAML コントロールは、コントロール テンプレートで端に基づくアニメーションを明示的には使いません。しかし、アニメーション動作が組み込まれています。エッジ UI を含めるお勧めの方法は、Page.BottomAppBar プロパティと Page.TopAppBar プロパティを使って、AppBar (または CommandBar) を追加する方法です。こうすると、すべての適切な切り替えと相互作用の動作にアニメーションが自動的に適用されます。詳しくは、「アプリ パーの追加」をご覧ください。

ポップアップ (FlyoutMenuFlyoutSettingsFlyout) を使う場合も、アニメーションが組み込まれています。しかし、これらを表示するには、アプリ ウィンドウの端ではなく、コンテキストに関連付ける必要があるため、これらは実際には端に基づく UI ではありません。AppBar から呼び出す UI でポップアップを使うこともできますが、これでも純粋なエッジ UI の状況とは異なります。詳しくは、「ポップアップとメニューの追加」と「ポップアップ UI のアニメーション化」をご覧ください。

その他のリソース

ポップアップのサンプルは、Popup.ChildTransitions での PaneThemeTransition の使い方を示しています。

エッジに基づく UI アニメーションの使用時のデザインのベスト プラクティスについては、「エッジに基づく UI アニメーションのガイドラインとチェック リスト」をご覧ください。

関連トピック

UI のアニメーション化
クイック スタート: ライブラリのアニメーションを使った UI のアニメーション化
アプリ バーの追加
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

表示:
© 2014 Microsoft