.NET MAUI拖拽时如何更改跟随光标显示的图像？

我正在开发带拖拽功能的.NET MAUI界面，拖拽功能本身正常，但需要实现两个需求：

• 更换拖拽时跟随光标移动的图像（非拖拽源/目标图像）
• 隐藏MAUI默认在拖拽图像上方添加的“Copy”提示图形

现有代码如下，附当前拖拽效果演示：

现有XAML代码 #

<Frame Margin="20" HorizontalOptions="Center" BorderColor="LightBlue" ZIndex="1" MaximumWidthRequest="400" MaximumHeightRequest="400" BackgroundColor="LightBlue">
    <Image x:Name="reds"  Source="reds_trans_bg.png" MaximumHeightRequest="100" MinimumHeightRequest="100" MaximumWidthRequest="100" MinimumWidthRequest="100">
        <Image.GestureRecognizers>
            <DragGestureRecognizer  CanDrag="True" DragStarting="DragGestureRecognizer_DragStarting_2"  />
        </Image.GestureRecognizers>
    </Image>
</Frame>

<Frame Margin="20" HorizontalOptions="Center" BorderColor="LightBlue" ZIndex="1" MaximumWidthRequest="400" MaximumHeightRequest="400" BackgroundColor="LightBlue">
    <Frame.GestureRecognizers>
        <DropGestureRecognizer AllowDrop="True" Drop="DropGestureRecognizer_Drop_2" />
    </Frame.GestureRecognizers>
    <VerticalStackLayout VerticalOptions="Center" BackgroundColor="LightBlue">
        <Image Source="washer_trans_bg.png" BackgroundColor="LightBlue" ZIndex="100" MaximumWidthRequest="100" MaximumHeightRequest="100" >
        </Image>
        <HorizontalStackLayout HorizontalOptions="Center" BackgroundColor="LightBlue">
            <Label x:Name="contents" Text="test" BackgroundColor="LightBlue" TextColor="White" FontAttributes="Bold">
            </Label>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</Frame>

现有C#代码 #

private void DragGestureRecognizer_DragStarting_2(object sender, DragStartingEventArgs e)
{
    var image = (sender as Element)?.Parent as Image;
    e.Data.Properties.Add("Text", "Red");
}

private void DropGestureRecognizer_Drop_2(object sender, DropEventArgs e)
{
    var data = e.Data.Properties["Text"].ToString();
    
    contents.Text = $"Red: {++count}";
}

当前拖拽效果：

解决方案 #

1. 自定义拖拽跟随图像 #

在DragStarting事件里创建自定义图像视图，通过e.Visual属性替换默认的拖拽视觉。

2. 跨平台隐藏Copy提示 #

不同平台需要针对性处理，直接在DragStarting事件中加入平台判断代码即可。

修改后的完整C#代码 #

private int count = 0; // 确保count已定义

private void DragGestureRecognizer_DragStarting_2(object sender, DragStartingEventArgs e)
{
    var image = (sender as Element)?.Parent as Image;
    e.Data.Properties.Add("Text", "Red");
    
    // 创建自定义拖拽跟随图像，替换为你的图像路径
    var customDragImage = new Image
    {
        Source = "custom_drag_icon.png",
        WidthRequest = 100,
        HeightRequest = 100
    };
    // 设置为拖拽时的跟随视觉
    e.Visual = customDragImage;
    
    // 隐藏默认的Copy提示，分平台处理
#if ANDROID
    e.Handled = true; // 阻止系统生成默认拖拽视觉
#elif IOS
    var window = MauiProgram.Current.Services.GetRequiredService<Microsoft.Maui.Controls.Window>();
    var nativeView = customDragImage.ToPlatform(window);
    if (e.PlatformArgs.DragItems?.Any() == true)
    {
        e.PlatformArgs.DragItems[0].PreviewProvider = () => nativeView; // 用自定义视图覆盖默认预览
    }
#elif WINDOWS
    e.PlatformArgs.DataPackage.Properties.Title = string.Empty; // 清空标题，隐藏Copy提示
#endif
}

private void DropGestureRecognizer_Drop_2(object sender, DropEventArgs e)
{
    // 安全获取拖拽数据
    if (e.Data.Properties.TryGetValue("Text", out var textObj) && textObj is string text)
    {
        contents.Text = $"Red: {++count}";
    }
}

注意事项 #

• 确保自定义图像已正确添加到各平台资源：
  • Android：放入Resources/drawable目录，Build Action设为AndroidResource
  • iOS：放入Resources目录，Build Action设为BundleResource
  • Windows：放入Assets目录，Build Action设为Content

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