MAUI新生6.10-控件辅助功能②:手势GestureRecognizers

除了UI事件之外,MAUI还提供了另外一套UI交互机制-手势识别。通过识别用户的手势,如点击、轻扫等,可以像事件一样执行回调, 也可以直接绑定命令。另外,由于手势识别针对View对象,所以我们可以脱离事件限制,为所有UI控件定义手势交互。比较遗憾的是,和Flutter相比,目前MAUI提供的手势识别,还是不够丰富,但基本够用。MAUI提供了点击、指针、轻扫、缩放、平移、拖放六种手势,根据使用方式的差异,由易到难,分三个部分来学习:

一、点击Tap和指针Pointer

1、点击Tap和指针Pointer,直接通过定义UI控件的GestureRecognizers属性来创建手势交互。

1)点击Tap
//MainPage.xaml
<ContentPage ...>
    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Image x:Name="image"
               Source="dotnet_bot.png"
               Aspect="Center">
            <!--所有派生自View的控件,都有GestureRecognizers属性,可以定义手势识别集合-->
            <Image.GestureRecognizers>
                <!--Tap点击手势:
                    ①Tapped:点击事件
                    ②NumberOfTapsRequired:点击数量,单击为1,双击为2,以此类推
                    ③Buttons:选择鼠标左键或右键,Primary为左键
                    ④Command/CommandParameter:可以绑定命令-->
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                                      NumberOfTapsRequired="1"
                                      Buttons="Primary" />
            </Image.GestureRecognizers>
        </Image>
    </VerticalStackLayout>
</ContentPage>

//MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    ......
    private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        //调用点击手势传入的事件参数e的GetPosition方法获取相对作标
        //GetPosition()方法的参数为坐标的参照对象,如为null则相对于整个窗口,可以传入具体对象
	double x = e.GetPosition(image).Value.X;
	double y = e.GetPosition(image).Value.Y;
	await DisplayAlert("点击手势",$"当前坐标:x-{x},y-{y}","OK");
    }
}

2)指针Pointer,鼠标移入、移动和移出
<ContentPage ...>
    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Image x:Name="image"
               Margin="10"
               Source="dotnet_bot.png"
               Aspect="Center">
            <Image.GestureRecognizers>
                <!--Point手势定义鼠标移入、移动和移出:
                    ①事件:PointerEntered-移入、PointerMoved移动、PointerExited移出
                    ②相应的命令:
                    ---PointerEnteredCommand/PointerEnteredCommandParameter
                    ---PointerMovedCommand/PointerMovedCommandParameter
                    ---PointerExitedCommand/PointerExitedCommandParameter-->
                <PointerGestureRecognizer PointerEntered="PointerEntered"
                                          PointerMoved="PointerMoved"
                                          PointerExited="PointerExited" />
            </Image.GestureRecognizers>
        </Image>
    </VerticalStackLayout>
</ContentPage>

二、轻扫Swipe、捏放Pinch、平移Pan

轻扫、捏放和平移,除了可以直接通过定义UI控件的GestureRecognizers属性来创建手势交互外,还可以在UI控件外,包围一个自定义的手势容器类,容器内的控件都将可以进行手势交互,实现类型冒泡的效果。

三、拖放Drag&Drop

拖放涉及到多个控件对象以及对象之间的数据处理,最为复杂


posted @   functionMC  阅读(853)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示