MAUI中两个CollectionView间拖放问题：放置命令未触发

问题描述 #

在MAUI项目中实现两个CollectionView之间的拖放功能：第一个绑定歌曲集合，第二个绑定播放列表集合。目前DragStartedCommand可正常触发，但SongDroppedCommand无法触发，需要排查原因并解决。

现有代码 #

歌曲CollectionView的XAML代码 #

<CollectionView
    Grid.Row="2"
    Margin="0,4"
    EmptyView="You have no songs in your library!"
    ItemsSource="{Binding Songs}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="m:Song">
            <SwipeView android:SwipeView.SwipeTransitionMode="Reveal">
                <SwipeView.RightItems>
                    <SwipeItems SwipeBehaviorOnInvoked="Close">
                        <SwipeItem
                            BackgroundColor="Pink"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=FavoriteCommand}"
                            CommandParameter="{Binding .}"
                            Text="Favorite" />
                    </SwipeItems>
                </SwipeView.RightItems>
                <Frame Margin="4" Padding="4">
                    <cell:SongArtist />
                    <Frame.GestureRecognizers>
                        <DragGestureRecognizer
                            CanDrag="True"
                            DragStartingCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=DragStartedCommand}"
                            DragStartingCommandParameter="{Binding .}" />
                    </Frame.GestureRecognizers>
                </Frame>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

播放列表CollectionView的XAML代码 #

<CollectionView
    Grid.Row="5"
    Margin="0,4"
    EmptyView="You have no songs in your playlist!" 
    ItemsSource="{Binding PlayList}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="m:Song">
            <SwipeView android:SwipeView.SwipeTransitionMode="Reveal">
                <SwipeView.RightItems>
                    <SwipeItems SwipeBehaviorOnInvoked="Close">
                        <SwipeItem
                            BackgroundColor="Red"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=DeleteCommand}"
                            CommandParameter="{Binding .}"
                            Text="Delete" />
                    </SwipeItems>
                </SwipeView.RightItems>
                <Frame Margin="4" Padding="4">
                    <cell:SongArtist />
                    <Frame.GestureRecognizers>
                        <DropGestureRecognizer AllowDrop="True" DropCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=SongDropped}" />
                    </Frame.GestureRecognizers>
                </Frame>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

ViewModel代码 #

[RelayCommand]
void DragStarted(Song song)
{
    dragged_song = song;
    Songs.Remove(song);
    Debug.WriteLine($"DragStarted {song.Name}");
}

[RelayCommand]
void SongDropped(Song song)
{
    PlayList.Add(song);
    Debug.WriteLine($"SongDropped");
}

问题原因及解决步骤 #

1. 命令绑定路径错误 #

使用RelayCommand时，自动生成的命令名称是方法名+Command，即SongDropped方法对应的命令是SongDroppedCommand，但XAML中绑定的路径是SongDropped，导致无法找到命令。

修改播放列表XAML中的DropGestureRecognizer：

<DropGestureRecognizer AllowDrop="True" 
                       DropCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=SongDroppedCommand}" />

2. 拖放参数类型不匹配 #

DropGestureRecognizer的DropCommand默认参数是DragEventArgs，而非当前Item的Song对象。需要从DragEventArgs中提取拖放的歌曲数据。

修改ViewModel中的SongDropped方法：

[RelayCommand]
void SongDropped(DragEventArgs e)
{
    // 从拖放数据中获取歌曲
    if (e.Data.GetData(typeof(Song)) is Song draggedSong)
    {
        PlayList.Add(draggedSong);
        Debug.WriteLine($"SongDropped {draggedSong.Name}");
        // 如果需要从原集合移除，建议在拖放完成后处理（比如添加DragCompletedCommand）
        // Songs.Remove(draggedSong);
    }
}

3. 修正DragStarted逻辑 #

原代码在DragStarted中直接移除歌曲，会导致UI提前更新，且拖放取消时无法恢复。应该在DragStarted中设置拖放数据，拖放完成后再处理集合。

修改ViewModel中的DragStarted方法：

[RelayCommand]
void DragStarted(DragStartingEventArgs e)
{
    if (e.Parameter is Song song)
    {
        // 设置拖放数据
        e.Data.SetData(song);
        dragged_song = song;
        Debug.WriteLine($"DragStarted {song.Name}");
        // 不要在这里移除歌曲，改为在DragCompleted中处理
    }
}

// 可选：添加DragCompletedCommand处理拖放完成后的逻辑
[RelayCommand]
void DragCompleted(DragCompletedEventArgs e)
{
    if (e.Result == DragResult.DropCompleted && dragged_song != null)
    {
        Songs.Remove(dragged_song);
        dragged_song = null;
    }
}

同时给DragGestureRecognizer添加DragCompletedCommand绑定：

<DragGestureRecognizer
    CanDrag="True"
    DragStartingCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=DragStartedCommand}"
    DragStartingCommandParameter="{Binding .}"
    DragCompletedCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=DragCompletedCommand}" />

4. 支持空播放列表接收拖放 #

原DropGestureRecognizer在ItemTemplate中，当播放列表为空时没有Item，无法接收拖放。需要将DropGestureRecognizer添加到CollectionView本身。

修改播放列表CollectionView：

<CollectionView
    Grid.Row="5"
    Margin="0,4"
    EmptyView="You have no songs in your playlist!" 
    ItemsSource="{Binding PlayList}">
    <!-- 添加到CollectionView的GestureRecognizers -->
    <CollectionView.GestureRecognizers>
        <DropGestureRecognizer AllowDrop="True" 
                               DropCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=SongDroppedCommand}" />
    </CollectionView.GestureRecognizers>
    <CollectionView.ItemTemplate>
        <!-- 原有ItemTemplate内容 -->
    </CollectionView.ItemTemplate>
</CollectionView>

5. 添加DragOverCommand优化拖放体验（可选） #

添加DragOverCommand可以设置拖放操作类型，给用户视觉反馈：

XAML中添加DragOverCommand绑定：

<DropGestureRecognizer AllowDrop="True" 
                       DropCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=SongDroppedCommand}"
                       DragOverCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:PlayListViewModel}}, Path=DragOverCommand}" />

ViewModel中添加DragOver方法：

[RelayCommand]
void DragOver(DragEventArgs e)
{
    // 设置允许的拖放操作：Copy或Move
    e.AcceptedOperation = DataPackageOperation.Move;
}

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