Aggiungere un riconoscimento movimento tocco

  • Articolo

Il gesto tocco viene usato per il rilevamento del tocco e viene implementato con la classe TapGestureRecognizer.

Per consentire il clic tramite il gesto tocco su un elemento dell'interfaccia utente, creare un'istanza di TapGestureRecognizer, gestire l'evento Tapped e aggiungere il nuovo sistema di riconoscimento del gesto tocco alla raccolta GestureRecognizers nell'elemento dell'interfaccia utente. L'esempio di codice seguente visualizza un TapGestureRecognizer associato a un elemento Image:

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

Per impostazione predefinita, l'immagine risponde ai singoli tocchi. Impostare la proprietà NumberOfTapsRequired per attendere un doppio tocco (o più tocchi se richiesti).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Quando NumberOfTapsRequired è impostato su un valore maggiore di uno, il gestore dell'evento viene eseguito solo se i tocchi vengono effettuati entro un determinato periodo di tempo (il periodo di tempo non è configurabile). Se non vengono effettuati entro il periodo di tempo, il secondo tocco o i tocchi successivi vengono ignorati e il 'conteggio dei tocchi' viene azzerato.

Uso di Xaml

È possibile aggiungere un sistema di riconoscimento del gesto tocco a un controllo in Xaml usando le proprietà associate. La sintassi per aggiungere TapGestureRecognizer a un'immagine è indicata di seguito (in questo caso la definizione di un evento doppio tocco):

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

Il codice per il gestore eventi (nell'esempio) incrementa un contatore e modifica l'immagine dal colore al bianco e nero.

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

Uso di ICommand

Le applicazioni che usano il criterio Model-View-ViewModel (MVVM) usano in genere ICommand anziché collegare direttamente i gestori degli eventi. TapGestureRecognizer può supportare ICommand impostando l'associazione nel codice:

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

o usando Xaml:

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

Il codice completo per questo modello di visualizzazione è indicato nell'esempio. I dettagli dell'implementazione di Command pertinenti sono illustrati di seguito:

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
}