Pointer gesture recognizer in .NET MAUI

We can now identify Pointer Gestures in .NET MAUI ! Which will allow us to add interactions, make decisions based on what our user is doing and in this way to be able to improve their experience! In this article we will learn to implement them in a very fast and easy way!

Let’s start!

Starting with Pointer Gestures

Pointer Gesture Recognizer allow us to detect when the pointer enters, exits and moves within an assigned view. 

Let’s look at each of these gestures in a visual example:

➖ Enter: It allows us to detect that the pointer has entered the bounding area of the view.

➖ Move:  It allows us to detect that the pointer is moving inside the bounding area of the view.

➖Exits: It allows us to detect that the pointer has exited the bounding area of the view.

Commands & events

Commands

The PointerGestureRecognizer class has defined Commands for each of the gestures included above, which are invoked once the mouse enters, exits or moves over the element that was assigned, below I show you a table where these commands are named:

Events

But also the PointerGestureRecognizer class defines three events that are raised when the pointer enters, moves, or exits the bounded area of the view.

Now let’s practice!

Now that you have all the needed knowledge, we just need to know how to translate this into code, it’s very easy, let’s see below:

Finally, let’s add your events!

Getting the gesture position

We can also get the position at which a pointer gesture occurred. You can do it with the GetPosition method on a PointerEventArgs object. This one accepts an Element? argument, and returns the position as a Point?. Let’s take a closer look at these elements:

➖Element?: Defines the element with respect to which the position should be obtained. Providing a null value as this argument means that the GetPosition method returns a Point?

➖Point?: Defines the position of the pointer gesture within the window.

Let’s see an example:

✨ Important to know:

➖.NET MAUI have defined the PointerOver Visual State  which allows us to change the appearance of a view when the pointer is over it. You can view more information here.

➖Pointer gesture recognition is only supported on iPadOS, Mac Catalyst, and Windows.

Thanks for ready! 👋

See you next time! 💚💕

References: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/gestures/pointer?view=net-maui-7.0?WT.mc_id=DT-MVP-50033

Spanish article: https://es.askxammy.com/reconociendo-gestos-del-puntero-en-net-maui/