Guidelines for edge-based UI animations (Windows Store apps)
This topic describes best practices for edge-based animations. Edge-based animations show or hide UI that originates from the edge of the screen. The show and hide actions can be initiated either by the user or by the app. The UI can either overlay the app or be part of the main app surface. If the UI is part of the app surface, the rest of the app might need to be resized to accommodate it.
- Use edge UI animations to show or hide a custom message or error bar that does not extend far into the screen.
- Use panel animations to show UI that slides a significant distance into the screen, such as a task pane or a custom soft keyboard.
- Slide the UI in from the same edge that it will be attached to.
- Slide the UI out to the same edge that it came in from.
- If the contents of the app need to resize in response to the UI sliding in or out, use fade animations for the resize.
- If the UI is sliding in, use a fade animation after the edge UI or panel animation.
- If the UI is sliding out, use a fade animation at the same time as the edge UI or panel animation.
- Don't apply these animations to notifications. Notifications should not be housed within edge-based UI.
- Don't apply the edge UI or panel animations to any UI container or control that is not at the edge of the screen. These animations are used only for showing, resizing, and dismissing UI at the edges of the screen. To move other types of UI, use reposition animations.
For general Windows Store requirements, see Certification requirements for Windows apps.
- Using the Animation Library animations sample
- C#/VB/C++ and XAML:
- Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
- Animating edge-based UI (Windows Store apps using C#/VB/C++ and XAML)
- Quickstart: Animating your UI using library animations (Windows Store apps using C#/VB/C++ and XAML)
Build date: 12/16/2013