Ajouter un module de reconnaissance de mouvement d’appui

  • Article

Le geste d’appui est utilisé pour la détection des appuis, il est implémentée avec la classe TapGestureRecognizer.

Pour qu’un élément d’interface utilisateur réagisse à un appui, créez une instance TapGestureRecognizer, traitez l’événement Tapped et ajoutez le nouveau module de reconnaissance de geste à la collection GestureRecognizers sur l’élément d’interface utilisateur. L'exemple de code suivant montre un TapGestureRecognizer attaché à un élément Image :

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap
};
image.GestureRecognizers.Add(tapGestureRecognizer);

Par défaut, l’image répond aux appuis uniques. Définissez la propriété NumberOfTapsRequired pour attendre un double-appui (ou plusieurs appuis si nécessaire).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Quand NumberOfTapsRequired a une valeur supérieure à 1, le gestionnaire d’événements est exécuté uniquement si les appuis se produisent dans un intervalle de temps donné (cette période n’est pas configurable). Si les appuis suivants (le deuxième ou les autres) ne se produisent pas dans cette période, ils sont effectivement ignorés et le « nombre d’appuis » redémarre.

Utilisation de Xaml

Vous pouvez ajouter un module de reconnaissance de geste à un contrôle en Xaml à l’aide des propriétés jointes. La syntaxe pour ajouter un TapGestureRecognizer à une image est indiquée ci-dessous (dans ce cas, en définissant un événement double appui) :

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Tapped="OnTapGestureRecognizerTapped"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

Le code du gestionnaire d’événements (dans l’exemple) incrémente un compteur et modifie l’image de couleur en noir et blanc.

void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
    tapCount++;
    var imageSender = (Image)sender;
    // watch the monkey go from color to black&white!
    if (tapCount % 2 == 0) {
        imageSender.Source = "tapped.jpg";
    } else {
        imageSender.Source = "tapped_bw.jpg";
    }
}

Utilisation de ICommand

Les applications qui utilisent modèle-vue-vue modèle (MVVM) se servent généralement d’ICommand plutôt que des gestionnaires d’événements. TapGestureRecognizer peut facilement prendre en charge ICommand en définissant la liaison dans le code :

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding (TapGestureRecognizer.CommandProperty, "TapCommand");
image.GestureRecognizers.Add(tapGestureRecognizer);

ou en utilisant Xaml :

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Command="{Binding TapCommand}"
            CommandParameter="Image1" />
    </Image.GestureRecognizers>
</Image>

Le code complet pour ce modèle de vue se trouve dans l’exemple. Les informations pertinentes sur l’implémentation de Command sont présentées ci-dessous :

public class TapViewModel : INotifyPropertyChanged
{
    int taps = 0;
    ICommand tapCommand;
    public TapViewModel () {
        // configure the TapCommand with a method
        tapCommand = new Command (OnTapped);
    }
    public ICommand TapCommand {
        get { return tapCommand; }
    }
    void OnTapped (object s)  {
        taps++;
        Debug.WriteLine ("parameter: " + s);
    }
    //region INotifyPropertyChanged code omitted
}