如何在MAUI中使用拖放手势到CollectionView

Question

我正在尝试在我的 .NET MAUI 项目中实现 CollectionView 的拖放功能。 当我尝试拖动图像时，程序由于异常而暂停。我该如何解决这个问题？

ItemDragged 函数在调试控制台中显示图像路径，但之后程序暂停。 这是代码 Xaml代码

                <!-- CollectionView to Display Additional Images -->
                <CollectionView Grid.Row="2" ItemsSource="{Binding Images}">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="4" HorizontalItemSpacing="10" VerticalItemSpacing="10" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Border StrokeThickness="0" StrokeShape="RoundRectangle 12" HeightRequest="80" WidthRequest="80">
                                <Image Source="{Binding ImagePath}" Aspect="AspectFill">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding BindingContext.ImageTappedCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                      CommandParameter="{Binding ImagePath}" />
                                         <DragGestureRecognizer
                                        CanDrag="True"
                                        DragStartingCommand="{Binding BindingContext.ItemDraggedCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                                        DragStartingCommandParameter="{Binding .}" />
                                    <DropGestureRecognizer
                                        AllowDrop="True"
                                        DragLeaveCommand="{Binding BindingContext.ItemDragLeaveCommand,Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                                        DragLeaveCommandParameter="{Binding .}"
                                        DragOverCommand="{Binding BindingContext.ItemDraggedOverCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                                        DragOverCommandParameter="{Binding .}"
                                        DropCommand="{Binding BindingContext.ItemDroppedCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                                        DropCommandParameter="{Binding .}" />

                                    </Image.GestureRecognizers>
                                </Image>
                            </Border>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

ViewModel代码

public partial class PostJobStepOneViewModel : BaseViewModel { 
private readonly RoutingService routingService;
private readonly Repo repo; 
public ObservableCollection<Image> Images { get; } = new ObservableCollection<Image>(); 
public Command<Image> ItemDraggedCommand { get; } 
public Command<Image> ItemDragLeaveCommand { get; } 
public Command<Image> ItemDraggedOverCommand{ get; } 
public Command<Image> ItemDroppedCommand { get; } 
private Image _itemBeingDragged;
public PostJobStepOneViewModel(RoutingService routingService, Repo repo) 
{ 
    this.routingService = routingService; this.repo = repo; 
    ItemDraggedCommand = new Command<Image>(ItemDragged); 
    ItemDragLeaveCommand = new Command<Image>(ItemDragLeave); 
    ItemDraggedOverCommand = new Command<Image>(ItemDraggedOver); 
    ItemDroppedCommand = new Command<Image>(ItemDropped); 
}

public void ItemDragged(Image imagePath)
        {   
            imagePath.IsBeingDragged = true;
            _itemBeingDragged = imagePath;
             Debug.WriteLine($"ItemDragged: {imagePath?.ImagePath}");
        }
        
        public void ItemDragLeave(Image imagePath)
        {
             Debug.WriteLine($"ItemDragLeave: {imagePath?.ImagePath}");
            imagePath.IsBeingDraggedOver = false;
        }
        public void ItemDraggedOver(Image imagePath)
        {
              Debug.WriteLine($"ItemDraggedOver: {imagePath?.ImagePath}");
            if (imagePath == _itemBeingDragged)
            {
                imagePath.IsBeingDragged = false;
            }
            imagePath.IsBeingDraggedOver = imagePath != _itemBeingDragged;
        }
 
        public void ItemDropped(Image imagePath)
        {
            try
            {
                var itemToMove = _itemBeingDragged;
                var itemToInsertBefore = imagePath;
                if (itemToMove == null || itemToInsertBefore == null || itemToMove == itemToInsertBefore)
                    return;
                int insertAtIndex = Images.IndexOf(itemToInsertBefore);
                if (insertAtIndex >= 0 && insertAtIndex < Images.Count)
                {
                    Images.Remove(itemToMove);
                    Images.Insert(insertAtIndex, itemToMove);
                    itemToMove.IsBeingDragged = false;
                    itemToInsertBefore.IsBeingDraggedOver = false;
                }
                Debug.WriteLine($"ItemDropped: {imagePath?.ImagePath}");
                // Debug.WriteLine($"ItemDropped: [{itemToMove?.ImagePath}] => [{itemToInsertBefore?.ImagePath}], target index = [{insertAtIndex}]");
            }
            catch (Exception ex)


            {
                Debug.WriteLine(ex.Message);
            }
        }
        public partial class Image : ObservableObject
    {
        [ObservableProperty]
        private string imagePath;
        [ObservableProperty]
        private bool isBeingDragged;
        [ObservableProperty]
        private bool isBeingDraggedOver;
    }
    
}

Answer 1

我创建了一个新项目，并删除了一些代码，例如TapCommand和RoutingService，因为你没有提供它们。

然后，我在android和windows平台上进行了测试：

• 在 Windows 上：

没有任何问题。您可以轻松地用指针拖放图像。

• 在安卓上：

长按图像时可以拖动图像。这和windows不一样。

当我尝试拖动图像时，程序因异常而暂停

这是因为您按下它时立即拖动它。您可以尝试长按拖动。