This topic describes best practice recommendations for list animations. List animations enable you to insert or remove single or multiple items from a collection, such as a photo album or a list of search results.
Unless specified otherwise, these guidelines apply to both list and search list animations.
Appropriate use of list animations
- Use the list animations to add a single new item to an existing set of items. For example, use them when a new email arrives or a new photo is imported into an existing set.
- Use the list animations to add several items to a set at one time. For example, use them when you import a set of new photos into an existing collection. The addition or deletion of multiple items should happen at the same time, with no delay between the action on the individual objects.
- Use the add and delete list animations as a pair. Whenever you use one of these animations, use the corresponding animation for the opposite action.
- Use the list animations with a list of items to which you can add or delete one element or group of elements at once.
- Use the search list animations when your results will reflow multiple times one after another, such as when you use a word wheel in a search filter.
Inappropriate use of list animations
- Don't use list animations to display or remove a container. These animations are for members of a collection or set that is already being displayed. Use one of the pop-up animations to show or hide a transient container on top of the app surface. Use the content transition animations to display or replace a container that is part of the app surface.
- Don't use the list animations on an entire set of items. Use the content transition animations to add or remove an entire collection within your container.
- Don't use the non-search list animations with a list that requires frequent rearrangement animations, such as when you use a word wheel in a search filter.
Checklist
For general Windows Store requirements, see Certification requirements for Windows apps.
Related topics
- Using the Animation Library animations sample
- JavaScript and HTML:
- Animating your UI (Windows Store apps using JavaScript and HTML)
- Animating list additions and deletions (Windows Store apps using JavaScript and HTML)
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
- C#/VB/C++ and XAML:
- Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
- Animating list additions and deletions (Windows Store apps using C#/VB/C++ and XAML)
- Quickstart: Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
- AddDeleteThemeTransition
Build date: 3/5/2013
