Animating list item changes (XAML)

Articolo
08/31/2015

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.

Add/delete from list animations

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.

Add/Delete from search list animations

If you work in JavaScript, you can use animations specifically designed to add items to or delete items from a list of search items. C#, C++, and Microsoft Visual Basic do not provide those other animations. Instead, use AddDeleteThemeTransition for both search and non-search lists.