Language: HTML | XAML

Animating drag-and-drop sequences (XAML)

Applies to Windows and Windows Phone

Use drag-and-drop animations when users move objects with their fingers, or with an input device such as a mouse or stylus. Common drag-and-drop actions include moving a single item within a list and dropping one item on top of another.

Note  Use the drag-and-drop animations only when the user is moving the object. To move the object otherwise, use the reposition animations.

This set of animations consists of the following APIs:

Default drag-support is available in ListView and GridView for XAML. The drag-drop animations are built-in for the items support if you use these in your UI and you don't need to do anything to get these animations. But these animations will be useful if you extend drag-drop functionality into other controls, particularly your own custom controls.

Drag start

Every drag-and-drop animation sequence begins with a drag start (DragItemThemeAnimation), which is shown when the user begins to drag an object.

This animation modifies the appearance of both the drag source (the object being dragged) and one or more affected objects. An affected object is an object that might change position in response to the drag-and-drop sequence. For example, when you reorder a list, all items in the list other than the drag source are affected objects because their position in the list could change as a result. Affected items are animated to show the user how those items would change position in response to the current action. Note that not all drag sources have affected objects.

The following images show the relation of the drag source to the affected objects in the drag start animation. The first image shows the drag object and its neighbors before the user begins to drag the object.

Four objects of the same size, one labelled as the drag source

When the user selects the object and begins to drag it, the dragged object becomes larger and the affected objects become smaller.

Four objects, with the drag source increased in size and the other three affected objects somewhat decreased in size

The next image shows the case where neighboring objects are not affected.

Four objects, with the drag source increased in size and the other three unchanged from their initial size

Drag end

Every drag-and-drop animation sequence ends with the drag end animation (DropTargetItemThemeAnimation), which is shown when the user drops a dragged object. The drag end animation is never used unless the drag start animation was used first.

The drag end animation places the drag source (the object being dragged) into its final position. At the same time, it removes the visual changes to the drag source and affected items that were applied by the drag start animation. The affected objects in a call to DropTargetItemThemeAnimation are always the same objects used in the call to DragItemThemeAnimation.

The following images show the relation of the drag source to its affected objects in the drag end animation. The first image shows an object before the user drops it into a set of affected objects. The drag source is shown larger than its normal size, and offset from the list. The affected objects are shown smaller than their normal size.

Four objects, with the drag source increased in size and offset from the plane of the other three affected objects, which are somewhat decreased in size

This image shows the case where the dropped object does not affect other objects. The drag source is again larger and offset from the others, but the other objects are shown at their normal size.

Four objects, with the drag source increased in size and offset from the other three objects, which are unchanged from their initial size

Once the user drops the drag source, all objects return to their normal size, repositioned if necessary.

Four objects of the same size, one labelled as the drag source

Drag between

Use the drag between enter animation (DragOverThemeAnimation) when the user drags an object (the drag source) between two other objects that it can be dropped between. This animation shows the user the affected objects that will move apart to make room for the drag source, if the user chooses to drop the drag source in that position.

The following images show the movement of the affected objects in response to the drag source. The first image shows the affected objects before the drag source triggers the drag between enter animation.

Drag source object overlapping two affected objects which are shown in their original positions

In the next image, the drag between enter animation has caused the two objects on either side of the drag source to move apart.

Drag source object overlapping two affected objects which have separated to show the drop location

Drag-drop animations in default Windows Runtime control behavior

Event handling for custom drag-drop

There's base element input event support for drag-drop, and you will need to handle these events in order to define a drag-drop behavior in a custom control. For more info, see UIElement.Drop.

Other resources

Download XAML ListView and GridView essentials sample and XAML ListView and GridView customizing interactivity sample; run the samples to try the ListView and GridView animations yourself.

See Guidelines and checklist for drag-and-drop animations for design best practices in the use of these animations.

Related topics

Animating your UI
Quickstart: Animating your UI using library animations
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

Show:
© 2014 Microsoft