Animating list item changes (XAML)
Use list animations to show changes in a collection of similar items. This includes add and delete animations. These animations provide a smooth visual transition for the entry or exit of the new items, which makes it obvious to the user what has happened. During an add animation, existing items slide out of the way to make space for the new item. The new item then fades into the space, scaling up as it does so. A delete animation is the reverse.
The animation for either add or delete is AddDeleteThemeTransition. The animation for items being repositioned in a list is ReorderThemeTransition. Typically you place both AddDeleteThemeTransition and ReorderThemeTransition in the same animation set.
Use list animations to show the insertion or deletion of items in a collection of similar items. These animations differ from the add/delete from search list animations, in that the search animations are somewhat faster, to accommodate filtering search results while the user is entering the search term.
There's also a separate ReorderThemeTransition that you apply if an item changes position in a list. This is animated differently than deleting an item and adding it in a new place with the associated delete/add animations.
- ListView, GridView, and GroupItem: each of these controls has both AddDeleteThemeTransition and ReorderThemeTransition as values for the ItemContainerTransitions property, applied by the default Style. (They also have ContentThemeTransition and EntranceThemeTransition). For more info see ListView styles and templates and GridView styles and templates.
See Guidelines and checklist for add and delete animations for design best practices in the use of these animations.
- Animating your UI
- Quickstart: Animating your UI using library animations
- XAML personality animations sample
- Adding ListView and GridView controls