语言: HTML | XAML

创建拖放顺序动画 (XAML)

当用户用自己的手指或输入设备(例如鼠标或触笔)移动对象时,使用拖放动画。常见拖放操作包括移动列表中的单个项目,和将一个项目放在另一个项目上。

注意  只有当用户移动对象时,才使用拖放动画。若要以其他方式移动对象,请使用重新定位动画。

此动画集包括以下 API:

默认的拖动支持在适用于 XAML 的 ListViewGridView 中可用。如果你在 UI 中使用拖放动画,将内置这些动画以支持项目,并且你无需执行任何操作,即可获取这些动画。但是如果你将拖放功能扩展到其他控件(特别是你自己的自定义控件)中,这些动画将很有用。

拖动开始

每个拖放动画序列均以拖动开始 (DragItemThemeAnimation) 开始动画,当用户开始拖动对象时显示。

此动画修改拖动源(即被拖动的对象)和一个或多个受影响对象的外观。受影响的对象是可能变换位置以响应拖放事件的对象。例如,重新排序列表时,列表中除了拖动源,所有项目都是受影响的对象,因为它们在列表中的位置结果可能更改。受影响的项将以动画显示,提醒用户这些项将如何更改位置来响应当前的操作。注意,并非所有拖动源都有受影响的对象。

下图显示了拖动开始动画中拖动源和受影响对象的关系。第一个图显示了用户开始拖动对象之前拖动对象及其相邻对象。

四个对象具有相同大小,其中一个标记为拖动源。

当用户选择对象并开始拖动时,被拖动的对象开始变大,并且受影响的对象开始变小。

四个对象,拖动源增加大小,其他三个受影响的对象大小有点儿缩小

下图显示了相邻对象不受影响的情况。

四个对象,拖动源增加大小,其他三个对象保持原始大小不变

拖动结束

每个拖放动画序列均以拖动结束动画 (DropTargetItemThemeAnimation) 结束,当用户放置拖动的对象时显示。除非首先使用了拖动开始动画,否则从不使用拖动结束动画。

此拖动结束动画将拖动源(正在拖动的对象)放置在其最终位置。与此同时,它还会删除对拖动源进行的可视更改,以及由拖动开始动画应用的受影响的项目。在调用 DropTargetItemThemeAnimation 中使用的受影响对象始终与在调用 DragItemThemeAnimation 中使用的对象相同。

下图显示了拖动结束动画中拖动源以及其受影响对象的关系。第一个图显示了在用户放入一组受影响对象之前的对象。拖动源显得大于其正常大小,并且偏离列表中的位置。受影响的对象显得小于其正常大小。

四个对象,拖动源增加大小,并偏离其他三个受影响对象的平面,三个受影响对象的大小有点儿缩小

此图显示了放置的对象不影响其他对象的情况。拖动源仍然较大并偏离其他对象,但其他对象以其正常大小显示。

四个对象,拖动源增加大小并偏离其他三个对象,其他三个对象保持原始大小不变

当用户放置拖动源后,所有对象将返回其正常大小,并在必要时重新定位。

四个对象具有相同大小,其中一个标记为拖动源。

在之间拖动

当用户将可以置于其他两个对象之间的一个对象(源对象)拖动到这两个对象之间时,使用在进入间拖动动画 (DragOverThemeAnimation)。此动画向用户显示,如果用户选择将拖动源放在该位置,受影响的对象将移开,为拖动源腾出位置。

下图显示了受影响对象为响应拖动源而发生的移动。第一个图显示了在拖动源触发在进入间拖动动画之前受影响的对象。

拖动源对象覆盖在其原始位置显示的两个受影响的对象

在下图中,在进入间拖动动画导致将拖动源任一侧的两个对象移开。

拖动源对象覆盖两个受影响的对象,两个受影响的对象分开以显示放置位置

采用默认 Windows 运行时控件行为的拖放动画

自定义拖放的事件处理

存在对拖放的基本元素输入事件支持,你将需要处理这些事件,以便在自定义控件中定义拖放行为。有关详细信息,请参阅 UIElement.Drop

其他资源

下载 XAML ListView 和 GridView 基本示例 以及 XAML ListView 和 GridView 自定义交互示例;运行这些示例以自行试用 ListViewGridView 动画。

有关使用这些动画的设计最佳做法,请参阅拖放动画的指南和清单

相关主题

创建 UI 动画
快速入门:使用库动画创建 UI 动画
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

显示:
© 2015 Microsoft