Xamarin.Forms
Gestos

Haga que una imagen pueda ser ejecutada agregando un TapGestureRecognizer

Hay un par de reconocedores predeterminados disponibles en Xamarin.Forms, uno de ellos es el TapGestureRecognizer .

Puedes añadirlos a prácticamente cualquier elemento visual. Echa un vistazo a una implementación simple que se une a una Image . Aquí es cómo hacerlo en código.

var tappedCommand = new Command(() =>
{
    //handle the tap
});

var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand };
image.GestureRecognizers.Add(tapGestureRecognizer);

O en XAML:

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Command="{Binding TappedCommand}"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

Aquí el comando se establece mediante el enlace de datos. Como puede ver, también puede configurar NumberOfTapsRequired para habilitarlo para más toques antes de que actúe. El valor predeterminado es 1 toque.

Otros gestos son Pinch y Pan.

Acercar una imagen con el gesto de pellizco

Para poder hacer que una Image (o cualquier otro elemento visual) pueda hacer zoom, debemos agregarle un PinchGestureRecognizer . Aquí está cómo hacerlo en código:

var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => {
// Handle the pinch
};
    
image.GestureRecognizers.Add(pinchGesture);

Pero también se puede hacer desde XAML:

<Image Source="waterfront.jpg">
  <Image.GestureRecognizers>
    <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
  </Image.GestureRecognizers>
</Image>

En el controlador de eventos que se acompaña, debe proporcionar el código para ampliar su imagen. Por supuesto, otros usos pueden ser implementados también.

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
    // ... code here
}

Otros gestos son Tap y Pan.

Muestra todo el contenido de la imagen ampliada con PanGestureRecognizer

Cuando tenga una Image ampliada (u otro contenido) puede arrastrarla alrededor de la Image para mostrar todo su contenido en el estado ampliado.

Esto se puede lograr mediante la implementación de PanGestureRecognizer. Desde el código se ve así:

var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
  // Handle the pan
};

image.GestureRecognizers.Add(panGesture);

Esto también se puede hacer desde XAML:

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

En el evento de código subyacente ahora puede manejar el panorama en consecuencia. Use esta firma de método para manejarlo:

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  // Handle the pan
}

Coloque un pin donde el usuario tocó la pantalla con MR.Gestures

Los Xamarins incorporados en los reconocedores de gestos proporcionan un manejo táctil muy básico. Por ejemplo, no hay forma de obtener la posición de un dedo que toca. MR.Gestures es un componente que agrega 14 eventos diferentes de manejo táctil. La posición de los dedos que tocan es parte de los EventArgs pasados ​​a todos los eventos de MR.Gestures.

Si desea colocar un pin en cualquier lugar de la pantalla, la forma más sencilla es usar un MR.Gestures.AbsoluteLayout que controla el evento Tapping .

<mr:AbsoluteLayout x:Name="MainLayout" Tapping="OnTapping">
    ...
</mr:AbsoluteLayout>

Como puede ver, el Tapping="OnTapping" también se parece más a .NET que a la sintaxis de Xamarins con los GestureRecognizers anidados. Esa sintaxis fue copiada de iOS y huele un poco a los desarrolladores de .NET.

En su código, detrás de usted, podría agregar el controlador OnTapping esta manera:

private void OnTapping(object sender, MR.Gestures.TapEventArgs e)
{
    if (e.Touches?.Length > 0)
    {
        Point touch = e.Touches[0];
        var image = new Image() { Source = "pin" };
        MainLayout.Children.Add(image, touch);
    }
}

En lugar del evento Tapping , también puede usar TappingCommand y enlazar con su ViewModel, pero eso complicaría las cosas en este sencillo ejemplo.

Se pueden encontrar más muestras de MR.Gestures en la aplicación GestureSample en GitHub y en el sitio web de MR.Gestures . Estos también muestran cómo utilizar todos los demás eventos táctiles con controladores de eventos, comandos, MVVM, ...