Xamarin.Forms
Gestes

Faire une image tappable en ajoutant un TapGestureRecognizer

Il existe deux types de reconnaissance par défaut disponibles dans Xamarin.Forms, l’un d’entre eux est le TapGestureRecognizer .

Vous pouvez les ajouter à pratiquement n'importe quel élément visuel. Jetez un oeil à une implémentation simple qui se lie à une Image . Voici comment le faire en code.

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

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

Ou en XAML:

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

Ici, la commande est définie à l'aide de la liaison de données. Comme vous pouvez le voir, vous pouvez également définir le NumberOfTapsRequired pour l'activer pour plus de taps avant d'agir. La valeur par défaut est 1 tapotement.

Les autres gestes sont Pinch et Pan.

Zoomer une image avec le geste de pincement

Afin de rendre une Image (ou tout autre élément visuel) zoomable, nous devons lui ajouter un PinchGestureRecognizer . Voici comment le faire en code:

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

Mais cela peut aussi être fait à partir de XAML:

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

Dans le gestionnaire d'événement accompagné, vous devez fournir le code pour zoomer sur votre image. Bien entendu, d'autres utilisations peuvent également être mises en œuvre.

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

Les autres gestes sont Tap et Pan.

Afficher tout le contenu de l'image zoomée avec le PanGestureRecognizer

Lorsque vous avez une Image agrandie (ou un autre contenu), vous pouvez faire glisser l' Image pour afficher tout son contenu dans l'état agrandi.

Cela peut être réalisé en implémentant le PanGestureRecognizer. Du code cela ressemble à ça:

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

image.GestureRecognizers.Add(panGesture);

Cela peut également être fait à partir de XAML:

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

Dans l'événement code-behind, vous pouvez maintenant gérer le panoramique en conséquence. Utilisez cette signature de méthode pour le gérer:

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

Placez une épingle à l'endroit où l'utilisateur a touché l'écran avec MR.Gestures

Les détecteurs de gestes intégrés Xamarins ne fournissent qu'une manipulation tactile très simple. Par exemple, il n'y a aucun moyen d'obtenir la position d'un doigt touchant. MR.Gestures est un composant qui ajoute 14 événements de traitement tactile différents. La position des doigts qui se touchent fait partie de EventArgs transmis à tous les événements MR.Gestures.

Si vous souhaitez placer une épingle n'importe où sur l'écran, le plus simple est d'utiliser un MR.Gestures.AbsoluteLayout qui gère l'événement Tapping .

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

Comme vous pouvez le voir, Tapping="OnTapping" ressemble plus à la syntaxe .NET que Xamarins avec les GestureRecognizers imbriqués. Cette syntaxe a été copiée depuis iOS et ça sent un peu pour les développeurs .NET.

Dans votre code, vous pouvez ajouter le gestionnaire OnTapping comme OnTapping :

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);
    }
}

Au lieu de l'événement Tapping , vous pouvez également utiliser la commande TappingCommand et la lier à votre ViewModel, mais cela compliquerait les choses dans cet exemple simple.

Vous trouverez d'autres exemples pour MR.Gestures dans l' application GestureSample sur GitHub et sur le site Web de MR.Gestures . Ils montrent également comment utiliser tous les autres événements tactiles avec les gestionnaires d'événements, les commandes, MVVM, ...