.NET MAUI中拖拽经过错误图片后AllowDrop失效问题求助

问题现象 #

拖拽图片经过不匹配的错误目标图片后，即使拖拽到匹配的正确目标图片，也无法触发放置操作；但直接拖拽到正确目标时逻辑完全正常。

代码片段 #

拖拽源图片XAML #

<Image Grid.Row="0"
        x:Name="image1"
        Grid.Column="0"
        Source="{Binding FirstImageRoute}"
        Opacity="{Binding SecondImageOpacity}">
    <Image.GestureRecognizers>
        <DragGestureRecognizer
                    CanDrag="True"
                    DropCompletedCommand="{Binding DragCompleteCommand}"
                    DragStartingCommand="{Binding DragStartingCommand}"
        DragStartingCommandParameter="{x:Reference image1}">
        </DragGestureRecognizer>
    </Image.GestureRecognizers>
</Image>

目标图片XAML #

<Image x:Name="image2"
    Grid.Row="1"
       Grid.Column="1"
       Source="{Binding SecondImageRoute}"
       Opacity="{Binding FirstImageOpacity, Mode=TwoWay}">
    <Image.GestureRecognizers>
        <DropGestureRecognizer AllowDrop="{Binding IsAllow}"
               DragOverCommand="{Binding DragOverCommand}"
               DropCommand="{Binding DropCommand}"
               x:Name="drop1">
            <DropGestureRecognizer.DragOverCommandParameter>
                <Binding Source="{x:Reference image2}"/>
            </DropGestureRecognizer.DragOverCommandParameter>
            <DropGestureRecognizer.DropCommandParameter>
                <Binding Source="{x:Reference image2}"/>
            </DropGestureRecognizer.DropCommandParameter>
        </DropGestureRecognizer>
    </Image.GestureRecognizers>
</Image>

<Image x:Name="image3"
       Grid.Row="1"
       Grid.Column="0"
       Source="{Binding FirstImageRoute}"
       Opacity="{Binding SecondImageOpacity, Mode=TwoWay}">
    <Image.GestureRecognizers>
        <DropGestureRecognizer AllowDrop="{Binding IsAllow}"
               DragOverCommand="{Binding DragOverCommand}"
               DropCommand="{Binding DropCommand}"
               x:Name="drop2">
            <DropGestureRecognizer.DragOverCommandParameter>
                <Binding Source="{x:Reference image3}"/>
            </DropGestureRecognizer.DragOverCommandParameter>
            <DropGestureRecognizer.DropCommandParameter>
                <Binding Source="{x:Reference image3}"/>
            </DropGestureRecognizer.DropCommandParameter>
        </DropGestureRecognizer>
    </Image.GestureRecognizers>
</Image>

ViewModel属性 #

[ObservableProperty]
public double firstImageOpacity = 0.5;

[ObservableProperty]
public double secondImageOpacity = 0.5;

public bool isDroppedSuccessfully;

[ObservableProperty]
public bool isAllow = true;

拖拽命令逻辑 #

[RelayCommand]
private void DragCompleted()
{
    if (!isDroppedSuccessfully)
    {
        IsAllow = true;
    }
    isDroppedSuccessfully = false;
}

[RelayCommand]
public void DragStarting(Image image)
{
    if (image != null)
    {
        var filename = image.Source.ToString();
        TempImage = filename.Replace("File: ", "");
    }
}

[RelayCommand]
public void DragOver(Image image)
{
    var secondImage = image.Source.ToString().Replace("File: ", "");

    IsAllow = true;

    if (TempImage == secondImage)
    {
        IsAllow = true;
        return;
    }
    else
    {
        if (IsAllow)
        {
            IsAllow = false;
        }
    }
}

[RelayCommand]
public void Drop(Image image)
{
    IsAllow = true;

    isDroppedSuccessfully = true;

    image.Opacity = 1;
}

[RelayCommand]
public void DragComplete()
{
    if (!isDroppedSuccessfully)
    {
        IsAllow = true;
    }
    isDroppedSuccessfully = false;
}

问题分析 #

这不是.NET MAUI的Bug，而是逻辑设计缺陷：

• 两个目标图片的AllowDrop绑定了同一个全局IsAllow属性，当拖拽到错误目标时，IsAllow被设为false，此时所有目标的AllowDrop都会变为false。
• 即使后续拖拽到正确目标，DragOver中先将IsAllow设为true，但MAUI拖拽会话可能已经因为之前的AllowDrop=false标记为不可放置状态，导致Drop命令无法触发。
• 代码中还存在重复的DragCompleted和DragComplete命令，容易引发状态混乱。

解决方案 #

方案1：使用独立的允许放置属性（推荐） #

给每个目标图片单独设置允许放置的属性，避免全局状态冲突：

1. 修改ViewModel属性：

// 替换原有的IsAllow，给每个目标单独设置
[ObservableProperty]
public bool isAllowDropImage2 = true;

[ObservableProperty]
public bool isAllowDropImage3 = true;

2. 修改目标图片XAML的绑定：

<!-- image2的DropGestureRecognizer -->
<DropGestureRecognizer AllowDrop="{Binding IsAllowDropImage2}"
                       ...>
</DropGestureRecognizer>

<!-- image3的DropGestureRecognizer -->
<DropGestureRecognizer AllowDrop="{Binding IsAllowDropImage3}"
                       ...>
</DropGestureRecognizer>

3. 更新DragOver命令逻辑，针对当前目标设置对应属性：

[RelayCommand]
public void DragOver(Image image)
{
    var targetImagePath = image.Source.ToString().Replace("File: ", "");
    bool isMatch = TempImage == targetImagePath;

    if (image == image2)
    {
        IsAllowDropImage2 = isMatch;
    }
    else if (image == image3)
    {
        IsAllowDropImage3 = isMatch;
    }
}

方案2：始终允许放置，在Drop时验证（更可靠） #

放弃通过AllowDrop控制放置权限，始终设为true，仅在Drop命令中验证是否匹配，避免拖拽会话状态异常：

1. 修改目标图片XAML：

<DropGestureRecognizer AllowDrop="True"
                       ...>
</DropGestureRecognizer>

2. 调整DragOver和Drop命令逻辑：

[RelayCommand]
public void DragOver(Image image)
{
    var targetImagePath = image.Source.ToString().Replace("File: ", "");
    // 仅做视觉反馈，不修改AllowDrop
    image.Opacity = TempImage == targetImagePath ? 0.8 : 0.3;
}

[RelayCommand]
public void Drop(Image image)
{
    var targetImagePath = image.Source.ToString().Replace("File: ", "");
    if (TempImage == targetImagePath)
    {
        isDroppedSuccessfully = true;
        image.Opacity = 1;
    }
    // 不匹配则不执行任何操作
}

[RelayCommand]
public void DragComplete()
{
    // 拖拽结束后恢复目标图片透明度
    image2.Opacity = 0.5;
    image3.Opacity = 0.5;
    isDroppedSuccessfully = false;
}

3. 删除ViewModel中无用的IsAllow属性，以及重复的DragCompleted命令。

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