如何在CollectionView中拖拽SwipeItem调整元素显示顺序？

问题描述 #

我有一个绑定元素列表的CollectionView，其ItemTemplate内是指定x:DataType的DataTemplate，每个项包含带Label的Frame和对应SwipeItem（嵌套在SwipeView中）。想要实现用户通过上下拖拽Frame调整元素显示顺序，但尝试添加手势识别器后仅DragStartingCommand触发，其他命令无响应。

已尝试代码 #

<Frame.GestureRecognizers>
    <DragGestureRecognizer CanDrag="True"
                           DragStartingCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MyViewModel}}, Path=DragStartingCommand}"
                           DragStartingCommandParameter="{Binding .}" />

    <DropGestureRecognizer AllowDrop="True"
                           DragLeaveCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MyViewModel}}, Path=DragLeaveCommand}"
                           DragLeaveCommandParameter="{Binding .}"
                           DragOverCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MyViewModel}}, Path=DragOverCommand}"
                           DragOverCommandParameter="{Binding .}"
                           DropCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MyViewModel}}, Path=DropCommand}"
                           DropCommandParameter="{Binding .}" />
</Frame.GestureRecognizers>

额外需求 #

拖拽底部的“W”项时，原位置视觉隐藏，且目标位置下方的Frame自动下移腾出插入空间。

CollectionView本身原生支持拖拽排序，你遇到的问题是手动添加的手势与内置拖拽机制冲突，且SwipeView层级拦截了手势事件。以下是具体实现步骤：

1. 启用CollectionView内置拖拽排序 #

直接在CollectionView上配置拖拽相关属性，无需给Frame单独加DropGestureRecognizer：

<CollectionView x:Name="SortableCollectionView"
                ItemsSource="{Binding YourItemList}"
                CanReorderItems="True"
                AllowDrop="True"
                DragStarting="SortableCollectionView_DragStarting"
                DropCompleted="SortableCollectionView_DropCompleted">
    <!-- 你的ItemTemplate内容 -->
</CollectionView>

• CanReorderItems="True"：允许列表项重新排序
• AllowDrop="True"：允许接收拖拽的项
• 内置机制会自动处理“目标位置下方Frame下移”的位移动画，满足你的视觉需求

2. 实现拖拽时原位置隐藏 #

步骤1：给数据模型添加拖拽状态属性 #

public class YourItemType : INotifyPropertyChanged
{
    private bool _isDragging;
    public bool IsDragging
    {
        get => _isDragging;
        set { _isDragging = value; OnPropertyChanged(); }
    }

    // 其他属性及INotifyPropertyChanged实现
}

步骤2：绑定Frame的可见性 #

在DataTemplate中给Frame添加可见性绑定，配合反布尔值转可见性转换器：

<Frame IsVisible="{Binding IsDragging, Converter={StaticResource BooleanToInverseVisibilityConverter}}">
    <!-- Frame内部的Label等内容 -->
</Frame>

转换器实现示例：

public class BooleanToInverseVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is bool boolVal && !boolVal ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is Visibility visibility && visibility != Visibility.Visible;
    }
}

步骤3：处理拖拽开始/结束事件 #

在代码后台更新拖拽状态：

private void SortableCollectionView_DragStarting(object sender, ItemDragEventArgs e)
{
    if (e.Item is YourItemType draggedItem)
    {
        draggedItem.IsDragging = true;
    }
}

private void SortableCollectionView_DropCompleted(object sender, DropCompletedEventArgs e)
{
    foreach (var item in YourItemList)
    {
        item.IsDragging = false;
    }
}

3. 确保数据源为可观察集合 #

你的列表数据源必须是ObservableCollection<T>，这样拖拽排序后UI才能自动同步更新：

public ObservableCollection<YourItemType> YourItemList { get; set; } = new ObservableCollection<YourItemType>();

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