Animating pop-up UI (XAML)

아티클
08/31/2015

Use pop-up animations to show and hide pop-up UI, which includes context menus and flyouts. Pop-up elements are containers that appear over the app's content and are dismissed if the user taps or clicks outside of the pop-up element. These animations are mainly for use on custom controls; if you use Popup, Flyout and MenuFlyout elements in your XAML, these already have built-in library animations and you don't need to add any behavior here.

The animations that are relevant for pop-up behavior are: PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition.

The pop-up animations include a translation, which is a vertical movement from an initial position to the final position as the pop-up element fades in or out. The translation distance and direction is specified by the app. In most cases, the translation should be 50 pixels, moving in an upwards direction. However, if the pop-up element is displayed below the UI element that triggered the pop-up, then the translation should be 50 pixels, moving downwards. For example, this downward translation would be used with a flyout triggered from a navigation bar or from an app header. This is meant to give the user a visual link between the pop-up element and its triggering element.

Pop-up animations in default Windows Runtime control behavior

The default code for Popup, Flyout and MenuFlyout doesn't use the animations, these types have their own built-in animations that exist outside of the templates and styles. Popup has a ChildTransitions property that starts out as null, and if you want you can add PopupThemeTransition there. The reason you might do that is to adjust FromHorizontalOffset or FromVerticalOffset.