Animating edge-based UI (XAML)

Article
08/31/2015

Use edge-based UI animations to show or hide UI that originates from the edge of the screen. Either the user or the app can bring this UI into view. Use EdgeUIThemeTransition or smaller edge UI such as app bars or command bars. Use PaneThemeTransition for larger UI such as panes or panels that slide in. These animations are mainly for use on custom controls; existing controls such as AppBar and CommandBar have library animations for edge UI built in, and you'll get the animated behavior by simply including such controls in your UI.

The UI can either overlay the app or be part of the main app surface. If the UI is part of the main app surface, you might need to resize the rest of the app to make room for the new UI when it appears.

There are two types of edge-based elements, each with their own set of animation APIs: edge UI and pane UI.

Use the edge UI animation with smaller edge-based UI if your intention is to animate a custom control that's similar in behavior to AppBar, CommandBar or similar. You might also want to define a UI surface/area for errors and warnings that come from actions in your app. If you're addressing that scenario, make sure you read Guidelines for flyouts; edge-based UI may not be appropriate for your scenario.
Use the pane UI animation with larger edge-based UI that covers more of the app window. An example of the size of pane we're talking about here is the soft keyboard.

Edge-based animations in default Windows Runtime control behavior

The XAML controls don't explicitly use the edge-based animations in their control templates. But they have animated behavior built in. The recommended way to include edge UI is by adding an AppBar (or CommandBar) via the Page.BottomAppBar and Page.TopAppBar properties, which will automatically apply all appropriate transitions and interaction behavior for you. For more info, see Adding app bars.

If you're using flyouts (Flyout, MenuFlyout, SettingsFlyout), these also have built-in animations. But they aren't really edge-based UI, because they should be associated with the context that caused them to display, not with the app window edge. It may be that you use flyouts for UI that's invoked from an AppBar, but that's still a different situation than pure edge UI. For more info, see Adding flyouts and menus and Animating popup UI.