MAUI中如何将代码后台的PanGesture数据传递至ViewModel？

针对MAUI中PanGestureRecognizer无法直接绑定Command的问题，给你三种实用的实现方案，按需选择：

这是最直接的方式，适合小型应用快速实现：

• 思路：在XAML中给目标控件添加PanGestureRecognizer并绑定PanUpdated事件，后台事件处理方法中获取deltaX/deltaY，直接调用ViewModel的对应方法或更新属性。

代码示例 #

XAML部分：

<ContentPage ...>
    <Grid>
        <BoxView BackgroundColor="LightBlue">
            <BoxView.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="OnPanUpdated" />
            </BoxView.GestureRecognizers>
        </BoxView>
    </Grid>
</ContentPage>

后台代码（MainPage.xaml.cs）：

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    if (e.StatusType == GestureStatus.Running)
    {
        var viewModel = (MainViewModel)BindingContext;
        // 直接调用ViewModel的方法传递数据
        viewModel.SendPanData(e.TotalX, e.TotalY);
        // 或者更新ViewModel的绑定属性
        // viewModel.DeltaX = e.TotalX;
        // viewModel.DeltaY = e.TotalY;
    }
}

ViewModel部分（使用CommunityToolkit.Mvvm简化INotifyPropertyChanged实现）：

public class MainViewModel : ObservableObject
{
    private double _deltaX;
    public double DeltaX
    {
        get => _deltaX;
        set => SetProperty(ref _deltaX, value);
    }

    private double _deltaY;
    public double DeltaY
    {
        get => _deltaY;
        set => SetProperty(ref _deltaY, value);
    }

    public async void SendPanData(double deltaX, double deltaY)
    {
        // 调用第三方API的逻辑
        await SomeApiService.SendPanDataAsync(deltaX, deltaY);
    }
}

更符合MVVM规范，可复用性强，适合希望保持后台代码干净的场景：

• 思路：创建自定义Behavior，将PanGesture的事件转换为可绑定的Command，在XAML中直接绑定ViewModel的Command并传递delta数据。

代码示例 #

自定义Behavior：

using Microsoft.Maui.Controls;
using System.Windows.Input;

public class PanGestureCommandBehavior : Behavior<View>
{
    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(PanGestureCommandBehavior));

    public static readonly BindableProperty CommandParameterProperty =
        BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(PanGestureCommandBehavior));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }

    private PanGestureRecognizer _panGesture;

    protected override void OnAttachedTo(View bindable)
    {
        base.OnAttachedTo(bindable);
        _panGesture = new PanGestureRecognizer();
        _panGesture.PanUpdated += OnPanUpdated;
        bindable.GestureRecognizers.Add(_panGesture);
    }

    protected override void OnDetachingFrom(View bindable)
    {
        base.OnDetachingFrom(bindable);
        _panGesture.PanUpdated -= OnPanUpdated;
        bindable.GestureRecognizers.Remove(_panGesture);
    }

    private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        if (e.StatusType == GestureStatus.Running && Command?.CanExecute(CommandParameter) == true)
        {
            // 封装delta数据为对象传递
            var panData = new { DeltaX = e.TotalX, DeltaY = e.TotalY };
            Command.Execute(panData);
        }
    }
}

XAML中使用：

<ContentPage ...
             xmlns:local="clr-namespace:YourAppNamespace">
    <Grid>
        <BoxView BackgroundColor="LightBlue">
            <BoxView.Behaviors>
                <local:PanGestureCommandBehavior Command="{Binding PanCommand}" />
            </BoxView.Behaviors>
        </BoxView>
    </Grid>
</ContentPage>

ViewModel部分：

public class MainViewModel : ObservableObject
{
    public ICommand PanCommand { get; }

    public MainViewModel()
    {
        PanCommand = new Command<object>(ExecutePanCommand);
    }

    private async void ExecutePanCommand(object parameter)
    {
        if (parameter is dynamic panData)
        {
            double deltaX = panData.DeltaX;
            double deltaY = panData.DeltaY;
            // 调用第三方API
            await SomeApiService.SendPanDataAsync(deltaX, deltaY);
        }
    }
}

适合组件解耦的场景，避免后台与ViewModel直接关联：

• 思路：后台捕获delta数据后发送消息，ViewModel订阅消息并接收数据。

代码示例 #

定义消息类：

public class PanDataMessage
{
    public double DeltaX { get; set; }
    public double DeltaY { get; set; }
}

后台代码发送消息：

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    if (e.StatusType == GestureStatus.Running)
    {
        WeakReferenceMessenger.Default.Send(new PanDataMessage
        {
            DeltaX = e.TotalX,
            DeltaY = e.TotalY
        });
    }
}

ViewModel订阅消息：

public class MainViewModel : ObservableObject, IDisposable
{
    private IDisposable _messageSubscription;

    public MainViewModel()
    {
        _messageSubscription = WeakReferenceMessenger.Default.Register<PanDataMessage>(this, (recipient, message) =>
        {
            HandlePanData(message.DeltaX, message.DeltaY);
        });
    }

    private async void HandlePanData(double deltaX, double deltaY)
    {
        await SomeApiService.SendPanDataAsync(deltaX, deltaY);
    }

    public void Dispose()
    {
        _messageSubscription?.Dispose();
    }
}

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