Compartir a través de

Reconocimiento de un gesto de puntero

  • Artículo

Un reconocedor de gestos de puntero de interfaz de usuario de .NET Multi-Platform App UI (.NET MAUI) detecta cuándo el puntero entra, sale y se mueve dentro de una vista y se implementa con la clase PointerGestureRecognizer. Esta clase define las propiedades siguientes:

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

La clase PointerGestureRecognizer también define los eventos siguientes:

  • PointerEntered, que se genera cuando el puntero entra en el área de delimitación de la vista.
  • PointerExited, que se genera cuando el puntero que se encuentra en el área de delimitación de la vista sale de esa área de delimitación.
  • PointerMoved, que se genera cuando el puntero se mueve mientras permanece dentro del área de delimitación de la vista.
  • PointerPressed, que se genera cuando el puntero inicia una pulsación dentro de la vista.
  • PointerReleased, que se genera cuando se libera el puntero que ha iniciado previamente una pulsación, mientras se encuentra dentro de la vista.

Un objeto PointerEventArgs acompaña a los eventos y define una propiedad PlatformArgs de tipo PlatformPointerEventArgs que ofrece acceso a argumentos específicos de la plataforma para el evento.

En Android, la clase PlatformPointerEventArgs define las propiedades siguientes:

  • Sender, de tipo View, representa la vista nativa asociada al evento.
  • MotionEvent, de tipo MotionEvent, indica el evento nativo o el controlador adjuntos a la vista.

Además, el objeto PointerEventArgs define un método GetPosition que devuelve un objeto Point? que representa la posición del puntero cuando se detectó el gesto. Para obtener más información sobre el método GetPosition, consulta Obtención de la posición del gesto.

Importante

El reconocimiento de gestos de puntero es compatible con Android, iPadOS, Mac Catalyst y Windows.

.NET MAUI también define un estado visual PointerOver. Este estado puede cambiar la apariencia visual de una vista al mantener el cursor del ratón sobre ella, pero sin pulsar. Para obtener más información, consulta Estados visuales.

Creación de una clase pointerGestureRecognizer

Para hacer que View reconozca los gestos de puntero, crea un objeto PointerGestureRecognizer, controla los eventos necesarios y añade el reconocedor de gestos a la colección GestureRecognizers en la vista. Como alternativa, crea un objeto PointerGestureRecognizer y enlaza los comandos necesarios a las implementaciones ICommand y agrega el reconocedor de gestos a la colección GestureRecognizers en la vista.

En el ejemplo de código siguiente se muestra un elemento PointerGestureRecognizer adjunto a Image: PointerGestureRecognizer usa eventos para responder a la detección de gestos de puntero:

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                  PointerExited="OnPointerExited"
                                  PointerMoved="OnPointerMoved" />
  </Image.GestureRecognizers>
</Image>

El código para los controladores de eventos debe añadirse al archivo de código subyacente:

void OnPointerEntered(object sender, PointerEventArgs e)
{
    // Handle the pointer entered event
}

void OnPointerExited(object sender, PointerEventArgs e)
{
    // Handle the pointer exited event
}

void OnPointerMoved(object sender, PointerEventArgs e)
{
    // Handle the pointer moved event
}

El código de C# equivalente es el siguiente:

PointerGestureRecognizer pointerGestureRecognizer = new PointerGestureRecognizer();
pointerGestureRecognizer.PointerEntered += (s, e) =>
{
    // Handle the pointer entered event
};
pointerGestureRecognizer.PointerExited += (s, e) =>
{
    // Handle the pointer exited event
};
pointerGestureRecognizer.PointerMoved += (s, e) =>
{
    // Handle the pointer moved event
};

Image image = new Image();
image.GestureRecognizers.Add(pointerGestureRecognizer);

Obtención de la posición del gesto

La posición en la que se puede obtener un gesto de puntero producido llamando al método GetPosition en un objeto PointerEventArgs. El método GetPosition acepta un argumento Element? y devuelve una posición como un objeto Point?:

void OnPointerExited(object sender, PointerEventArgs e)
{
    // Position inside window
    Point? windowPosition = e.GetPosition(null);

    // Position relative to an Image
    Point? relativeToImagePosition = e.GetPosition(image);

    // Position relative to the container view
    Point? relativeToContainerPosition = e.GetPosition((View)sender);
}

El argumento Element? define el elemento con respecto al cual debe obtenerse la posición. Proporcionar un valor null como este argumento, significa que el método GetPosition devuelve un objeto Point? que define la posición del gesto de puntero dentro de la ventana.