Avalonia 手势操作GestureRecognizer示例

Avalonia 手势操作GestureRecognizer示例

Avalonia是.Net跨平台的UI库,支持Windows,Linux,iOS,MacOS,Android等;
本文测试内容为使用Avalonia监控上下左右滑动手势操作动作并触发事件;
手势操作支持安卓及PC电脑,并区分长滑动和短滑动;本文代码

步骤

1. 安装Avalonia For VS2022扩展
2. 新建名为LRGestureRecognizer的Avalonia Cross Platform项目
3. 将LRGestureRecognizer主工程及各个平台的启动工程改为.Net8
4. LRGestureRecognizer工程增加如下引用

		<PackageReference Include="Prism.Avalonia" Version="8.1.97.11000" />
		<PackageReference Include="Prism.DryIoc.Avalonia" Version="8.1.97.11000" />

5. 写代码,主要为SliderGestureRecognizer类的实现
6. 启动及调试代码

关键代码

// MainView.axaml.cs
    public partial class MainView : UserControl
    {
        MainViewModel VM;
        public MainView()
        {
            InitializeComponent();
            VM = new MainViewModel();
            DataContext = VM;
            // mainview.GestureRecognizers.Add(new LeftRightSlideGestureRecognizer());
            mainview.GestureRecognizers.Add(new SliderGestureRecognizer());
            mainview.AddHandler(SliderGestureRecognizer.MySliderEvent, PullGestureEndedEvent_Sub);
        }

        private void PullGestureEndedEvent_Sub(object? sender, SlideEventArgs e)
        {
            if (e.Slide == SlideEventType.SlideLeft || e.Slide == SlideEventType.LongSlideLeft)
            {
                VM.Greeting = e.Slide.ToString();
            }
            else
            {
                VM.Greeting = e.Slide.ToString();
            }
            System.Diagnostics.Debug.WriteLine(e.Slide);
        }
    }

<UserControl x:Class="LRGestureRecognizer.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:LRGestureRecognizer.ViewModels"
             x:Name="mainview"
             d:DesignHeight="450"
             d:DesignWidth="800"
             x:DataType="vm:MainViewModel"
             Background="Azure"  
             mc:Ignorable="d">
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>
	<!-- UserControl的Background必须要设置,不可为空 -->
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Greeting}" />
</UserControl>

// SliderGestureRecognizer.cs
 /// <summary>
 /// 全部方向都触发
 /// <para></para>
 /// </summary>
 public class SliderGestureRecognizer : GestureRecognizer
 {
     public static readonly RoutedEvent<SlideEventArgs> MySliderEvent
         = RoutedEvent.Register<SlideEventArgs>("MySliderEvent", RoutingStrategies.Bubble, typeof(Gestures));
     /// <summary>
     /// 允许鼠标触发
     /// <para>Default:true</para>
     /// </summary>
     public bool EnableMouse { get; set; }
     /// <summary>
     /// 方向
     /// <para>Default:Vector(1, 0)</para>
     /// </summary>
     public Vector Direction { get; set; }
     /// <summary>
     /// 距离 
     /// <para>Default:6</para>
     /// </summary>
     public float Distance { get; set; }
     private int _LongMultiple = 2;
     /// <summary>
     /// 长滑判断倍数
     /// <para>Default:2</para>
     /// </summary>
     public int LongMultiple
     {
         get => _LongMultiple;
         set
         {
             _LongMultiple = Math.Clamp(value, 1, 10000);
         }
     }

     public SliderGestureRecognizer()
     {
         Direction = new Vector(1, 0); // 设置手势方向为向左 
         Distance = 6;
         EnableMouse = true;
         if (LRGestureRecognizer.App.IsPCType)
         {
             LongMultiple = 3;
             Distance = 20;
         }
     }
     // 省略若干代码
}

效果

备注

1. MainView.axaml的UserControl的Background一定要设置,否则没有效果