Teilen über


Hinzufügen einer Tippgestenerkennung

Die Tippbewegung wird zur Tipperkennung verwendet und wurde mit der Klasse TapGestureRecognizer implementiert.

Erstellen Sie eine Instanz TapGestureRecognizer, bearbeiten Sie das Ereignis Tapped, und fügen Sie die neue Funktion zur Gestenerkennung der Sammlung GestureRecognizers im Benutzeroberflächenelement hinzu, damit ein Benutzeroberflächenelement mit der Tippbewegung angeklickt werden kann. Das folgende Codebeispiel zeigt die Instanz TapGestureRecognizer, die an das Element Image angefügt ist:

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

Standardmäßig reagiert das Bild auf einzelne Tippbewegungen. Legen Sie die Eigenschaft NumberOfTapsRequired so fest, dass auf ein Doppeltippen (oder falls erforderlich mehrmaliges Tippen) gewartet wird.

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Wenn NumberOfTapsRequired auf größer als 1 festgelegt ist, wird der Ereignishandler nur ausgeführt, wenn innerhalb eines festgelegten Zeitraums Tippbewegungen vorgenommen werden. Dieser Zeitraum ist nicht konfigurierbar. Sollte die zweite Tippbewegung (oder weitere) nicht in diesem Zeitraum stattfinden, werden sie effektiv ignoriert, und das „Zählen der Tippbewegungen“ startet neu.

Verwenden von XAML

Eine Gestenerkennung kann in XAML zum Steuerelement hinzugefügt werden, indem angefügte Eigenschaften verwendet werden. Die Syntax zum Hinzufügen von TapGestureRecognizer zu einem Bild wird nachfolgend dargestellt (in diesem Fall wird ein Ereignis mit Doppeltippen definiert):

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

Der Code für den Ereignishandler (im Beispiel) erhöht einen Zähler und ändert das Bild von Farbe in Schwarzweiß.

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

Verwenden von ICommand

Apps, die das MVVM-Muster (Model View ViewModel) verwenden, sollten ICommand verwenden, anstatt Ereignishandler direkt zu verknüpfen. TapGestureRecognizer kann ICommand unterstützen, indem die Bindung im Code festgelegt wird:

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

Alternativ kann sie durch XAML festgelegt werden:

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

Den vollständigen Code für dieses Ansichtsmodells finden Sie im Beispiel. Die wesentlichen Implementierungsdetails von Command werden nachfolgend veranschaulicht:

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
}