Language: HTML | XAML

Animating list item changes (XAML)

Applies to Windows and Windows Phone

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.

List animations in default Windows Runtime control behavior

Other resources

See Guidelines and checklist for add and delete animations for design best practices in the use of these animations.

Related topics

Animating your UI
Quickstart: Animating your UI using library animations
XAML personality animations sample
Adding ListView and GridView controls
AddDeleteThemeTransition
ReorderThemeTransition
ListView
GridView
ListViewItem
GridViewItem

 

 

Show:
© 2014 Microsoft