Animating pop-up UI (XAML)

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.

Other resources

The XAML personality animations sample shows how to use PopInThemeAnimation and PopOutThemeAnimation defined in a Storyboard and invoked explicitly. (This is Scenario 1 in the sample.)

See Guidelines and checklist for pop-up UI animations for design best practices in the use of these animations.

Animating your UI

Animating edge-based UI

Quickstart: Animating your UI using library animations

XAML personality animations sample