Animating drag-and-drop sequences (XAML)

Artikel
08/31/2015

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.

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

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

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.

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.

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

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.

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-drop animations in default Windows Runtime control behavior

ListViewItem and GridViewItem: These templates define visual states for drag and multidrag. Drag start states include a DragItemThemeAnimation applied to two parts. Drop target states include a DropTargetItemThemeAnimation. DragOverThemeAnimation is used in reorder hinting visual states, there is one for each direction (bottom, top, left, right) that an item could be dragged in from.

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.