在Avalonia ReactiveUI的MVVM模式下如何识别触摸屏手势并绑定方法

你当前的核心问题是：XAML中的事件默认绑定到View的代码隐藏类，无法直接绑定到ViewModel的方法。以下是两种符合MVVM模式的实现方案，均能实现左右滑动控制SplitView面板的显示/隐藏。

方案一：代码后台中转（简单易实现） #

这种方式通过View的代码隐藏类作为中间层，将手势事件传递给ViewModel处理，适合快速开发场景。

1. 修改MainWindowView的XAML #

给Pane内的Border添加命名，并移除原有的PointerMoved事件：

<SplitView.Pane>
    <Border x:Name="PaneBorder" Background="Yellow" CornerRadius="0">
        <!-- 原有StackPanel及内部控件保持不变 -->
    </Border>
</SplitView.Pane>

2. 在MainWindow.axaml.cs中添加事件中转逻辑 #

using Avalonia.Controls;
using Avalonia.Input;

namespace DomandaStack.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 绑定手势相关事件
            PaneBorder.PointerPressed += OnPanePointerPressed;
            PaneBorder.PointerReleased += OnPanePointerReleased;
        }

        private void OnPanePointerPressed(object? sender, PointerPressedEventArgs e)
        {
            if (DataContext is ViewModels.MainWindowViewModel vm)
            {
                vm.RecordGestureStart(e.GetCurrentPoint(null).Position);
            }
        }

        private void OnPanePointerReleased(object? sender, PointerReleasedEventArgs e)
        {
            if (DataContext is ViewModels.MainWindowViewModel vm)
            {
                vm.EvaluateGesture(e.GetCurrentPoint(null).Position);
            }
        }
    }
}

3. 更新ViewModel的手势处理逻辑 #

添加记录起始点和判断滑动方向的方法：

using Avalonia;
using ReactiveUI;
using System.Windows.Input;

namespace DomandaStack.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private bool _isOpen = false;
        public bool IsOpen
        {
            get => _isOpen;
            private set => this.RaiseAndSetIfChanged(ref _isOpen, value);
        }

        public ICommand OpenClosePanel_Command { get; }
        private void OpenClosePanel() => IsOpen = !IsOpen;

        private ViewModelBase _currentPage = new Page1ViewModel();
        public ViewModelBase CurrentPage
        {
            get => _currentPage;
            set => this.RaiseAndSetIfChanged(ref _currentPage, value);
        }

        // 记录手势起始坐标
        private Point _gestureStartPoint;

        public MainWindowViewModel()
        {
            OpenClosePanel_Command = ReactiveCommand.Create(OpenClosePanel);
        }

        // 记录滑动起始点
        public void RecordGestureStart(Point startPoint)
        {
            _gestureStartPoint = startPoint;
        }

        // 判断滑动方向并切换面板状态
        public void EvaluateGesture(Point endPoint)
        {
            // 计算X轴滑动距离，设置阈值避免误触
            var deltaX = endPoint.X - _gestureStartPoint.X;
            const int swipeThreshold = 50;

            // 滑动距离不足阈值时忽略
            if (Math.Abs(deltaX) < swipeThreshold) return;

            // 右滑打开面板，左滑关闭面板
            IsOpen = deltaX > 0;
        }
    }
}

方案二：使用Avalonia Behaviors（贴合MVVM原则） #

这种方式通过行为库将事件直接转换为ViewModel中的命令，完全遵循MVVM的关注点分离原则，适合大型项目。

1. 安装NuGet依赖 #

安装Avalonia行为库：

Install-Package Avalonia.Xaml.Behaviors

2. 修改MainWindowView的XAML #

添加行为命名空间，并给Border绑定手势事件到ViewModel命令：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:DomandaStack.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
        xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="DomandaStack.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="DomandaStack">

    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <SplitView IsPaneOpen="{Binding Path=IsOpen}"
                   OpenPaneLength="300"
                   CompactPaneLength="85"
                   DisplayMode="CompactOverlay"
                   PaneBackground="Transparent"
                   Background="white"
                   PanePlacement="Left">
            <SplitView.Pane>
                <Border Background="Yellow" CornerRadius="0">
                    <i:Interaction.Behaviors>
                        <!-- 绑定PointerPressed事件到ViewModel命令 -->
                        <ia:EventTriggerBehavior EventName="PointerPressed">
                            <ia:InvokeCommandAction Command="{Binding PointerPressedCommand}" 
                                                    EventArgsConverter="{StaticResource PointerPositionConverter}"/>
                        </ia:EventTriggerBehavior>
                        <!-- 绑定PointerReleased事件到ViewModel命令 -->
                        <ia:EventTriggerBehavior EventName="PointerReleased">
                            <ia:InvokeCommandAction Command="{Binding PointerReleasedCommand}" 
                                                    EventArgsConverter="{StaticResource PointerPositionConverter}"/>
                        </ia:EventTriggerBehavior>
                    </i:Interaction.Behaviors>
                    <!-- 原有StackPanel及内部控件保持不变 -->
                </Border>
            </SplitView.Pane>
            <!-- 原有Content区域保持不变 -->
        </SplitView>
    </Grid>
</Window>

3. 添加事件参数转换器 #

创建一个转换器，将PointerEventArgs转换为Point类型，在App.xaml中注册：

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:DomandaStack"
             x:Class="DomandaStack.App">
    <Application.Resources>
        <local:PointerEventArgsToPositionConverter x:Key="PointerPositionConverter"/>
    </Application.Resources>
</Application>

转换器代码：

using Avalonia.Input;
using System;
using System.Globalization;
using Avalonia.Data.Converters;

namespace DomandaStack
{
    public class PointerEventArgsToPositionConverter : IValueConverter
    {
        public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            if (value is PointerEventArgs args)
            {
                return args.GetCurrentPoint(null).Position;
            }
            return null;
        }

        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

4. 更新ViewModel的命令和逻辑 #

添加手势相关的命令，并实现滑动判断逻辑：

using Avalonia;
using ReactiveUI;
using System.Windows.Input;

namespace DomandaStack.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private bool _isOpen = false;
        public bool IsOpen
        {
            get => _isOpen;
            private set => this.RaiseAndSetIfChanged(ref _isOpen, value);
        }

        public ICommand OpenClosePanel_Command { get; }
        public ICommand PointerPressedCommand { get; }
        public ICommand PointerReleasedCommand { get; }

        private void OpenClosePanel() => IsOpen = !IsOpen;

        private ViewModelBase _currentPage = new Page1ViewModel();
        public ViewModelBase CurrentPage
        {
            get => _currentPage;
            set => this.RaiseAndSetIfChanged(ref _currentPage, value);
        }

        private Point _gestureStartPoint;

        public MainWindowViewModel()
        {
            OpenClosePanel_Command = ReactiveCommand.Create(OpenClosePanel);
            PointerPressedCommand = ReactiveCommand.Create<Point>(RecordGestureStart);
            PointerReleasedCommand = ReactiveCommand.Create<Point>(EvaluateGesture);
        }

        private void RecordGestureStart(Point startPoint)
        {
            _gestureStartPoint = startPoint;
        }

        private void EvaluateGesture(Point endPoint)
        {
            var deltaX = endPoint.X - _gestureStartPoint.X;
            const int swipeThreshold = 50;

            if (Math.Abs(deltaX) < swipeThreshold) return;

            IsOpen = deltaX > 0;
        }
    }
}

额外说明 #

• 滑动阈值（示例中为50像素）可根据需求调整，避免误触。
• 若需要在Content区域也支持滑动手势，只需将事件/行为绑定到Content区域的Border上即可。
• 不建议使用PointerMoved事件判断滑动方向，该事件会频繁触发，使用PointerPressed+PointerReleased记录起始/结束点的方式更准确。

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