UWP中ObservableCollection排序时，ListView流畅重排序动画实现求助

嘿，我之前也踩过UWP ListView排序动画的坑，你的问题太典型了——默认的ObservableCollection.Move确实会让ListView当成集合重置，Insert/Remove又只有移位项有动画，直接改Transitions根本不顶用。给你几个实测有效的方法：

一、放弃ObservableCollection.Move，手动模拟平滑移动的动画逻辑 #

默认的Move方法触发的是NotifyCollectionChangedAction.Move，但UWP ListView对这个动作的动画支持很差，本质上还是会刷新整个列表。换个思路，用先Remove再Insert的组合，同时配合Dispatcher微调动画节奏：

// 示例：把第oldIndex项移动到newIndex位置
var targetItem = YourObservableCollection[oldIndex];
YourObservableCollection.RemoveAt(oldIndex);

// 用Dispatcher延迟Insert，让Remove的动画先启动一点，视觉上更连贯
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
    YourObservableCollection.Insert(newIndex, targetItem);
});

这样ListView会分别触发Remove和Insert的过渡动画，流畅度比直接用Move好很多。如果觉得衔接还是生硬，还可以加个20-50毫秒的延迟再执行Insert。

二、启用ItemsUpdatingScrollMode并优化过渡动画 #

默认情况下，ListView的ItemsUpdatingScrollMode是KeepScrollOffset，集合变化时会保持滚动位置但动画生硬。改成KeepItemsInView，再配合针对性的过渡动画：

<ListView x:Name="YourListView" ItemsUpdatingScrollMode="KeepItemsInView">
    <ListView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition IsStaggeringEnabled="True" />
            <ReorderThemeTransition />
            <AddDeleteThemeTransition />
        </TransitionCollection>
    </ListView.ItemContainerTransitions>
</ListView>

这个属性的作用是，当集合项位置变化时，ListView会尽量保持可见项的显示状态，同时触发Reorder动画，比默认行为更贴合流畅排序的需求。

三、用Composition API手动控制排序动画（进阶方案） #

如果上面的方法还是达不到你要的流畅度，直接用UWP的Composition API完全自定义动画逻辑：

1. 给ListView的每个ItemContainer注册Loaded事件，获取对应的Visual对象：

private void ListViewItem_Loaded(object sender, RoutedEventArgs e)
{
    var listViewItem = sender as ListViewItem;
    var visual = ElementCompositionPreview.GetElementVisual(listViewItem);
    // 把visual和数据源项关联，这里用Tag存储
    listViewItem.Tag = visual;
}

2. 排序前后记录位置，用动画驱动项的位移：

// 排序前记录所有项的当前位置
var itemPositions = new Dictionary<YourItemType, Vector3>();
foreach (var item in YourObservableCollection)
{
    var listViewItem = YourListView.ContainerFromItem(item) as ListViewItem;
    if (listViewItem != null)
    {
        var visual = listViewItem.Tag as Visual;
        itemPositions[item] = visual.Offset;
    }
}

// 执行排序逻辑
var sortedItems = YourObservableCollection.OrderBy(x => x.YourSortProperty).ToList();
YourObservableCollection.Clear();
foreach (var item in sortedItems)
{
    YourObservableCollection.Add(item);
}

// 启动位移动画
var compositor = Window.Current.Compositor;
foreach (var item in sortedItems)
{
    var listViewItem = YourListView.ContainerFromItem(item) as ListViewItem;
    if (listViewItem != null && itemPositions.ContainsKey(item))
    {
        var visual = listViewItem.Tag as Visual;
        var moveAnimation = compositor.CreateVector3KeyFrameAnimation();
        moveAnimation.InsertKeyFrame(0f, itemPositions[item]);
        moveAnimation.InsertKeyFrame(1f, visual.Offset);
        moveAnimation.Duration = TimeSpan.FromMilliseconds(350);
        moveAnimation.Target = "Offset";
        visual.StartAnimation(moveAnimation);
    }
}

这个方案完全由你控制动画的时长、曲线，能实现最细腻的流畅效果，适合对动画要求很高的场景。

避坑提醒 #

别直接对ObservableCollection做OrderBy后重新赋值（比如YourObservableCollection = new ObservableCollection<...>(sortedList)），这样会完全重置ListView的项容器，所有动画都会消失，一定要用Add/Remove或者手动移动的方式更新集合。

内容的提问来源于stack exchange，提问作者Shahar Prish