言語: HTML | XAML

ポップアップ UI のアニメーション化 (XAML)

Applies to Windows and Windows Phone

ポップアップ アニメーションを使って、コンテキスト メニューやポップアップなど、ポップアップ UI を表示したり非表示にしたりします。ポップアップ要素とは、アプリのコンテンツの上に表示されるコンテナーのことで、ユーザーがポップアップ要素の外部をタップまたはクリックすると消えます。これらのアニメーションは主としてカスタム コントロールで使われます。XAML で PopupFlyoutMenuFlyout の各要素を使っている場合は、既に要素にライブラリ アニメーションが組み込まれているため、ここで動作を追加する必要はありません。

ポップアップ動作に関係するアニメーションは、PopInThemeAnimationPopOutThemeAnimationPopupThemeTransition です。

ポップアップ アニメーションには移動が含まれています。これは、ポップアップ要素がフェード インまたはフェード アウトしたときに最初の位置から最終的な位置への垂直方向の移動です。移動する距離と方向は、アプリによって指定されます。ほとんどの場合、上方向に 50 ピクセル移動します。ただし、ポップアップ要素がポップアップをトリガーした UI 要素の下に表示される場合は、下方向に 50 ピクセル移動します。たとえば、このような下方向の移動は、ナビゲーション バーまたはアプリ ヘッダーからトリガーされたポップアップに使われます。これは、ポップアップ要素とトリガーしている要素の関係性をユーザーが視覚的にわかるようにするためです。

既定の Windows ランタイム コントロール動作におけるポップアップ アニメーション

PopupFlyoutMenuFlyout の既定のコードはアニメーションを使いません。これらの型はテンプレートとスタイルの外部にある独自の組み込みアニメーションを持っています。Popup には ChildTransitions プロパティがあり、これは最初は null で、必要に応じてプロパティに PopupThemeTransition を追加できます。これを行う理由は、FromHorizontalOffset または FromVerticalOffset を調整するためです。

その他のリソース

XAML パーソナリティ アニメーションのサンプルは、Storyboard で定義されて明示的に呼び出される PopInThemeAnimationPopOutThemeAnimation の使い方を示しています。(これはサンプルの Scenario 1 です)。

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

関連トピック

UI のアニメーション化
端に基づく UI のアニメーション化
クイック スタート: ライブラリのアニメーションを使った UI のアニメーション化
XAML パーソナリティ アニメーションのサンプル
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

表示:
© 2014 Microsoft