Animating pointer actions
Language: HTML | XAML

Animating pointer actions (XAML)

Use pointer animations to provide users with visual feedback of a tap or click on an item. The pointer down animation (PointerDownThemeAnimation) is played when a user taps or clicks on an item. On Windows, the animation slightly shrinks the item to indicate that it is pressed; on Windows Phone, the animation tilts the item slightly around the positive y-axis in a 2.5D effect. The pointer up animation (PointerUpThemeAnimation) can be played when the tap or click is released. This animation restores the item to its original state, to indicate that it has been released.

Pointer animations in default Windows Runtime control behavior

  • ListViewItem and GridViewItem: each of these controls uses PointerDownThemeAnimation for visual states associated with pointer actions ("Pressed" and "PointerOverPressed"). This doesn't require PointerUpThemeAnimation because the animation stops running as soon as that visual state gets unloaded by control logic, which is tracking what's happening with the pointer.
  • SearchBox: Uses PointerDownThemeAnimation for selection of items in a search suggestion popup that's part of the extended control template.
  • On Windows Phone, Button uses these animations by default. The animations are subtle and useful but you can remove them if you need a Button to behave as it does on Windows. To do that, edit a copy of the Button default Style and delete all PointerDownThemeAnimation and PointerUpThemeAnimation elements from the visual states in the Style's template. If you make the Style implicit (that is, remove its x:Key attribute) then it will be applied to any Button that doesn't have a Style set on it explicitly.

Other resources

For more info on pointers and UI elements, see Responding to user interaction and Quickstart: Pointers.

Related topics

Animating your UI
Quickstart: Animating your UI using library animations
Guidelines and checklist for pointer animations



© 2017 Microsoft