Ajout d’un module de reconnaissance des appuisAdding a tap gesture recognizer

Télécharger l’exemple Télécharger l’exempleDownload Sample Download the sample

Le geste d’appui est utilisé pour la détection des appuis, il est implémentée avec la classe TapGestureRecognizer.The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class.

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.To make a user interface element clickable with the tap gesture, create a TapGestureRecognizer instance, handle the Tapped event and add the new gesture recognizer to the GestureRecognizers collection on the user interface element. L'exemple de code suivant montre un TapGestureRecognizer attaché à un élément Image :The following code example shows a TapGestureRecognizer attached to an Image element:

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.By default the image will respond to single taps. Définissez la propriété NumberOfTapsRequired pour attendre un double-appui (ou plusieurs appuis si nécessaire).Set the NumberOfTapsRequired property to wait for a double-tap (or more taps if required).

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).When NumberOfTapsRequired is set above one, the event handler will only be executed if the taps occur within a set period of time (this period is not 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.If the second (or subsequent) taps do not occur within that period they are effectively ignored and the 'tap count' restarts.

Utilisation de XamlUsing Xaml

Vous pouvez ajouter un module de reconnaissance de geste à un contrôle en Xaml à l’aide des propriétés jointes.A gesture recognizer can be added to a control in Xaml using attached properties. La syntaxe pour ajouter un TapGestureRecognizer à une image est indiquée ci-dessous (dans ce cas, en définissant un événement double appui) :The syntax to add a TapGestureRecognizer to an image is shown below (in this case defining a double tap event):

<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 remplace l’image en couleur par une image en noir et blanc.The code for the event handler (in the sample) increments a counter and changes the image from color to black & white.

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 ICommandUsing 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.Applications that use the Model-View-ViewModel (MVVM) pattern typically use ICommand rather than wiring up event handlers directly. TapGestureRecognizer peut facilement prendre en charge ICommand en définissant la liaison dans le code :The TapGestureRecognizer can easily support ICommand either by setting the binding in code:

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

ou en utilisant Xaml :or using 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.The complete code for this view model can be found in the sample. Les informations pertinentes sur l’implémentation de Command sont présentées ci-dessous :The relevant Command implementation details are shown below:

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
}