Язык: HTML | XAML

Анимация этапов перетаскивания (XAML)

Applies to Windows and Windows Phone

Используйте анимации перетаскивания, если пользователь перемещает объекты пальцами или с помощью устройств ввода, таких как мышь или перо. К обычным действиям перетаскивания относится перемещение элемента внутри списка элементов и помещение одного элемента поверх другого.

Примечание  Используйте анимации перетаскивания, только если пользователь перемещает объект. В противном случае для перемещения объекта используйте анимацию изменения положения.

В этот набор анимаций входят следующие API:

В XAML доступно стандартное перетаскивание для элементов управления ListView и GridView. В этих элементах управления присутствует встроенная анимация при перетаскивании их элементов, и для ее реализации не нужны никакие дополнительные действия. Анимация перетаскивания удобна, когда функция перетаскивания добавляется в другие элементы управления — в частности, в пользовательские элементы управления.

Начало перетаскивания

Начало перетаскивания (DragItemThemeAnimation) — первый из этапов анимации перетаскивания, который происходит в тот момент, когда пользователь начинает перетаскивать объект.

Эта анимация изменяет вид как источника перетаскивания (объекта, который перетаскивается), так и одного или нескольких затрагиваемых объектов. Затрагиваемый объект — это объект, который может изменить положение в ответ на операцию перетаскивания. Например, при изменении порядка списка все элементы списка, кроме источника перетаскивания, являются затрагиваемыми объектами, так как их положение в списке может поменяться. Анимация затрагиваемых объектов показывает, каким образом эти объекты меняют свое положение в ответ на текущее действие. Обратите внимание, что не у всех источников перетаскивания есть затрагиваемые объекты.

На следующих рисунках показана связь источника перетаскивания с затрагиваемыми объектами в анимации начала перетаскивания. На первом рисунке показан объект перетаскивания и соседние объекты перед началом перетаскивания.

Четыре объекта одинаковых размеров, один из которых помечен как источник перетаскивания

Когда пользователь выбирает объект и начинает перетаскивать его, перетаскиваемый объект увеличивается в размере, а затрагиваемые объекты — уменьшаются.

Четыре объекта, из которых источник перетаскивания увеличен в размере, а три остальных — несколько уменьшены

На следующем рисунке отображена ситуация, когда соседние объекты не затрагиваются.

Четыре объекта; размер источника перетаскивания увеличен, а размер трех остальных объектов не изменен

Завершение перетаскивания

Завершение перетаскивания (DropTargetItemThemeAnimation) — это последний из этапов анимации перетаскивания, отображаемый в тот момент, когда пользователь отпускает перетаскиваемый объект. Анимация завершения перетаскивания не используется, если перед ней не использовалась анимация начала перетаскивания.

Анимация завершения перетаскивания помещает источник перетаскивания (перетаскиваемый объект) в конечное положение. Также она отменяет визуальные изменения источника перетаскивания и затрагиваемых элементов, которые были применены анимацией начала перетаскивания. Затрагиваемые объекты при обращении к DropTargetItemThemeAnimation — это всегда те же самые объекты, которые используются при обращении к DragItemThemeAnimation.

На следующих рисунках показана связь источника перетаскивания с затрагиваемыми им объектами в анимации завершения перетаскивания. На первом рисунке показан объект перетаскивания в момент перед тем, как пользователь поместит его на затрагиваемые объекты. Источник перетаскивания увеличен в размере и смещен в списке. Затрагиваемые объекты уменьшены в размере.

Среди четырех объектов источник перетаскивания увеличен в размере и смещен относительно трех остальных (затрагиваемых) объектов, которые, в свою очередь, несколько уменьшены в размере

На этом рисунке отображена ситуация, когда отпускаемый объект не затрагивает другие объекты. Источник перетаскивания так же увеличен в размере и смещен относительно других объектов, но другие объекты в этот раз имеют обычный размер.

Среди четырех объектов источник перетаскивания увеличен в размере и смещен относительно трех остальных, размер которых не изменен

После отпускания источника перетаскивания все объекты принимают обычные размеры, а их расположение при необходимости изменяется.

Четыре объекта одинаковых размеров, один из которых помечен как источник перетаскивания

Перетаскивание между объектами

Анимация входа в перетаскивание между объектами (DragOverThemeAnimation) применяется, когда пользователь перетаскивает объект (источник перетаскивания) между двумя другими объектами, между которыми его можно разместить. Эта анимация показывает пользователю затрагиваемые объекты, которые раздвигаются, чтобы освободить место для объекта перетаскивания, если пользователь решит разместить его в данном положении.

На следующих рисунках показано перемещение затрагиваемых объектов в ответ на движение источника перетаскивания. На первом рисунке показаны затрагиваемые объекты перед моментом, когда источник перетаскивания инициирует анимацию входа в перетаскивание между объектами.

Источник перетаскивания перекрывает два затрагиваемых объекта, находящихся в исходном положении

На следующем рисунке во время анимации входа в перетаскивание между объектами два объекта по обе стороны от источника перетаскивания раздвигаются в стороны.

Источник перетаскивания, перекрывающий два затрагиваемых объекта, которые раздвинулись в стороны, чтобы освободить место отпускания

Стандартная анимация перетаскивания в элементах управления из среды выполнения Windows

  • ListViewItem и GridViewItem. Эти шаблоны определяют визуальное состояние перетаскивания одного и нескольких элементов. К состояниям начала перетаскивания относится DragItemThemeAnimation, применяемое к двум частям. К состояниям завершения перетаскивания относится DropTargetItemThemeAnimation. DragOverThemeAnimation используется в визуальных состояниях отображения подсказок при изменении порядка элементов и существует для каждого направления перетаскивания элемента (сверху, снизу, слева, справа).

Обработка событий при пользовательском перетаскивании

Поддержка перетаскивания присутствует на уровне события ввода в базовом элементе управления, поэтому вам нужно обрабатывать эти события, чтобы задать поведение пользовательского элемента управления в процессе перетаскивания. Дополнительную информацию см. в разделе UIElement.Drop.

Другие ресурсы

Скачайте примеры XAML ListView and GridView essentials и XAML ListView and GridView customizing interactivity и запустите их, чтобы самостоятельно проверить работу анимаций в элементах управления ListView и GridView.

Рекомендации по проектированию с использованием этих анимаций см. в руководстве и контрольном списке для анимаций перетаскивания.

Связанные разделы

Анимация пользовательского интерфейса
Краткое руководство: анимация вашего пользовательского интерфейса
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

Показ:
© 2014 Microsoft