Language: HTML | XAML

讓快顯 UI 產生動畫效果 (XAML)

Applies to Windows and Windows Phone

使用快顯動畫來顯示和隱藏快顯 UI,其中包括操作功能表和飛出視窗。快顯元素是顯示在應用程式內容之上的容器,如果使用者點選或按一下快顯元素以外的地方則會關閉。這些動畫主要用於自訂控制項;如果您在 XAML 中使用 PopupFlyoutMenuFlyout 元素,這些已經有內建動畫庫,因此您不需要在這裡新增任何行為。

與快顯行為相關的動畫包括: PopInThemeAnimationPopOutThemeAnimationPopupThemeTransition

快顯動畫包括平移,它是快顯元素淡入或淡出時從初始位置到最後位置的垂直移動。平移距離和方向是由應用程式指定的。在大部分的情況下,平移應該向上移動 50 個像素。不過,如果快顯元素顯示在觸發快顯的 UI 元素下方,則平移應該向下移動 50 個像素。例如,從瀏覽列或應用程式標頭所觸發的飛出視窗,都可以使用這種向下平移。這表示要在快顯元素及其觸發元素之間提供一個視覺連結給使用者。

預設 Windows 執行階段控制項行為的快顯動畫

PopupFlyoutMenuFlyout 的預設程式碼不使用動畫,這些類型有自己的內建動畫,存在於範本和樣式外部。Popup 有一個以 null 開始的 ChildTransitions 屬性,如有需要,可以在該處新增 PopupThemeTransition。這麼做的原因是調整 FromHorizontalOffsetFromVerticalOffset

其他資源

XAML 個人特質動畫範例示範如何使用在 Storyboard 中定義並明確叫用的 PopInThemeAnimationPopOutThemeAnimation (這是範例中的狀況 1)。

如需使用這些動畫設計的最佳做法,請參閱快顯 UI 動畫的指導方針和檢查清單

相關主題

讓 UI 產生動畫效果
讓以邊緣為基礎的 UI 產生動畫效果
快速入門:使用動畫庫讓 UI 產生動畫效果
XAML 個人特質動畫範例
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

顯示:
© 2014 Microsoft