.NET MAUI中如何修改DragGestureRecognizer拖拽时的元素外观

默认情况下，添加DragGestureRecognizer的元素拖拽时会显示半透明副本，你可以通过以下方式修改或替换这个视觉效果：

一、完全替换拖拽视觉效果 #

在DragStarting事件中直接设置自定义的DragVisual，就能彻底替换默认的半透明副本，你可以用任意XAML元素作为拖拽视图。

后台代码示例 #

private void OnDragStarting(object sender, DragStartingEventArgs e)
{
    // 自定义拖拽视图，这里用带圆角的Label举例
    var customDragView = new Label
    {
        Text = "自定义拖拽效果",
        BackgroundColor = Colors.LightCoral,
        Padding = new Thickness(12, 8),
        FontSize = 14,
        CornerRadius = 4
    };

    // 将自定义视图设为拖拽视觉
    e.DragVisual = customDragView;
}

XAML绑定事件：

<Frame BackgroundColor="LightGray" Padding="10">
    <Label Text="拖拽我">
        <Label.GestureRecognizers>
            <DragGestureRecognizer DragStarting="OnDragStarting" />
        </Label.GestureRecognizers>
    </Label>
</Frame>

二、调整默认拖拽视觉的大小/透明度 #

如果只是想修改默认半透明副本的属性，可以在DragStarting事件中获取默认视图并调整：

private void OnDragStarting(object sender, DragStartingEventArgs e)
{
    if (e.DragVisual is View defaultVisual)
    {
        // 调整透明度
        defaultVisual.Opacity = 0.6;
        // 缩小视图到原尺寸的80%
        defaultVisual.Scale = 0.8;
    }
}

注意：部分平台的默认DragVisual可能不是标准View类型，这种情况下需要写平台特定代码适配（比如Android自定义DragShadowBuilder，iOS修改UIDragItem预览）。

三、MVVM模式下的实现 #

如果用MVVM，可以通过自定义行为（Behavior）把DragStarting事件绑定到ViewModel的命令：

自定义行为代码 #

public class DragGestureBehavior : Behavior<View>
{
    public static readonly BindableProperty DragStartingCommandProperty =
        BindableProperty.Create(nameof(DragStartingCommand), typeof(ICommand), typeof(DragGestureBehavior));

    public ICommand DragStartingCommand
    {
        get => (ICommand)GetValue(DragStartingCommandProperty);
        set => SetValue(DragStartingCommandProperty, value);
    }

    protected override void OnAttachedTo(View bindable)
    {
        base.OnAttachedTo(bindable);
        var dragGesture = new DragGestureRecognizer();
        dragGesture.DragStarting += OnDragStarting;
        bindable.GestureRecognizers.Add(dragGesture);
    }

    private void OnDragStarting(object sender, DragStartingEventArgs e)
    {
        DragStartingCommand?.Execute(e);
    }

    protected override void OnDetachingFrom(View bindable)
    {
        base.OnDetachingFrom(bindable);
        var dragGesture = bindable.GestureRecognizers.OfType<DragGestureRecognizer>().FirstOrDefault();
        if (dragGesture != null)
        {
            dragGesture.DragStarting -= OnDragStarting;
            bindable.GestureRecognizers.Remove(dragGesture);
        }
    }
}

XAML中使用行为 #

<ContentView>
    <Label Text="MVVM拖拽项">
        <Label.Behaviors>
            <local:DragGestureBehavior DragStartingCommand="{Binding DragStartingCommand}" />
        </Label.Behaviors>
    </Label>
</ContentView>

ViewModel中处理逻辑 #

public ICommand DragStartingCommand => new Command<DragStartingEventArgs>(HandleDragStarting);

private void HandleDragStarting(DragStartingEventArgs e)
{
    // 在这里创建自定义拖拽视图或修改默认视图
    var customDragImage = new Image
    {
        Source = "drag_icon.png",
        WidthRequest = 60,
        HeightRequest = 60,
        Aspect = Aspect.AspectFit
    };
    e.DragVisual = customDragImage;
}

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