Avalonia ReactiveUI 中如何识别触摸屏手势

Question

我正在尝试使用 MVVM 模式来处理 Avalonia。我正在尝试创建一个识别触摸屏手势的应用程序。

到目前为止，我已经创建了带有简单图形的应用程序，但我希望能够识别我在触摸屏上所做的手势。我试图让我的代码识别打开和关闭

<border>

内的

<SplitView.Pane>

的手势，但我不知道如何正确调用

void TestGesture(...)

。

这是我的代码的一部分，清除了不必要的功能。

• 这是我的 MainWindowView avalonia:

<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"
        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">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.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"
                        PointerMoved="TestGesture">
                    <StackPanel Spacing="5">
                        <Button Content="Open"
                                Command="{Binding Path=OpenClosePanel_Command}"
                                VerticalAlignment="Top" HorizontalAlignment="Left"
                                HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                                Margin="8 10 0 0"
                                Width="65" Height="40"/>
                        
                        <ListBox Background="Transparent">
                            <ListBoxItem Content="Page 1"
                                         Height="50"
                                         VerticalContentAlignment="Center"/>
                            
                            <ListBoxItem Content="page 2"
                                         Height="50"
                                         VerticalContentAlignment="Center"/>
                            
                            <ListBoxItem Content="page 3"
                                         Height="50"
                                         VerticalContentAlignment="Center"/>
                            
                            <ListBoxItem Content="page 4"
                                         Height="50"
                                         VerticalContentAlignment="Center"/>

                        </ListBox>
                    </StackPanel>
                </Border>
            </SplitView.Pane>
            <SplitView.Content>
                <Border>
                    <Grid>
                        <TransitioningContentControl Content="{Binding Path=CurrentPage}"/>
                    
                    </Grid>
                </Border>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Window>

• 这在我的 MainWindowViewModel c#:

using Avalonia.Controls;
using Avalonia.Controls.Selection;
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);
        }

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


        //How to bind a function like this?
        public void TestGesture(object sender, Avalonia.Input.PointerEventArgs e)
        {

            var point = e.GetCurrentPoint(sender as Control);

            //if(pointerMoving == LeftToRight)
            //{
            //  IsOpen = true;
            //}
            //if(pointerMoving == LeftToRight)
            //{
            //  IsOpen = false;
            //}
        }

    }
}

我想做类似的事情

我可能使用了错误的方法，甚至可能使用了错误的属性，
希望您能理解；
谢谢你的帮助:)

Answer 1

我对使用触摸屏的设备实现桌面应用程序没有太多了解。当谈到使用像 2 个手指这样的手势来放大和缩小时，您可以在智能手机上的网站上进行放大和缩小，因为您没有 2 个指针，所以可能不存在，而且我不知道有任何库可以处理此问题。尽管仍然可以实现一些手势（与鼠标和键盘相比）：

• 左键单击相当于在触摸屏上单击或短按

• 双击相当于在触摸屏上轻按 2 次或短按

• 右键单击 --> 长按应用程序背景。

• 左键单击并拖动 --> 标记/突出显示单词或类似内容。