Windows Dev Center

Language: HTML | XAML

Animating swipe gestures (XAML)

Use swipe animations (SwipeHintThemeAnimation, SwipeBackThemeAnimation) when you implement the Windows 8 touch selection model (called a swipe) for the selection of an item.

The ListView and GridView controls for XAML include swipe hint animations for items.

Swipe hint

The swipe hint animation (SwipeHintThemeAnimation) shows the user that the item supports the swipe interaction. When the user presses and holds an item that supports the swipe interaction, the animation moves the item down and then back up, as a hint that the item supports the swipe interaction. This animation is already included for ListView and GridView items, just use these controls for items display and the animations are included.

Illustration showing the steps in a swipe hint animation

Swipe select

XAML doesn't have a swipe select animation, because selection is handled by different models such as selection modes of the controls and items. These each have their own visual metaphor that doesn't involve animation.

Swipe deselect

Use the swipe deselect animation when the user drags a currently selected item far enough to deselect it and then releases the item. The swipe deselect animation removes the selection indicator from the item and moves the item back to its rest position.

Illustration showing the steps in a swipe deselect animation: move and uncheck

Swipe gesture animations in default Windows Runtime control behavior

Other resources

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

Related topics

Animating your UI
Quickstart: Animating your UI using library animations
SwipeHintThemeAnimation
SwipeBackThemeAnimation

 

 

Show:
© 2015 Microsoft