Adicionar um reconhecedor de gestos TapAdd a tap gesture recognizer

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

O gesto de toque é usado para detecção de toque e é implementado com a classe TapGestureRecognizer.The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class.

Para tornar um elemento de interface do usuário clicável com o gesto de toque, crie uma TapGestureRecognizer instância, manipule o Tapped evento e adicione o novo reconhecedor de gesto à GestureRecognizers coleção no elemento de interface do usuário.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. O exemplo de código a seguir mostra um TapGestureRecognizer anexado a um Image elemento: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);

Por padrão, a imagem responderá a toques único.By default the image will respond to single taps. Defina a NumberOfTapsRequired propriedade como aguardar um toque duplo (ou mais toques, se necessário).Set the NumberOfTapsRequired property to wait for a double-tap (or more taps if required).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Quando NumberOfTapsRequired é definido acima de um, o manipulador de eventos só será executado se os toques ocorrerem dentro de um período de tempo definido (esse período não é configurável).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). Se o segundo toque (ou os toques posteriores) não ocorrerem dentro desse período, eles serão ignorados e a “contagem de toques” será reiniciada.If the second (or subsequent) taps do not occur within that period they are effectively ignored and the 'tap count' restarts.

Usando XAMLUsing Xaml

Um reconhecedor de gestos pode ser adicionado a um controle em XAML usando propriedades anexadas.A gesture recognizer can be added to a control in Xaml using attached properties. A sintaxe para adicionar um TapGestureRecognizer a uma imagem é mostrada abaixo (neste caso, definindo um evento de toque duplo ):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>

O código para o manipulador de eventos (no exemplo) incrementa um contador e altera a imagem de colorida para preto & branca.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";
    }
}

Usando ICommandUsing ICommand

Aplicativos que usam o padrão MVVM (Model-View-ViewModel) normalmente usam ICommand em vez de conectar manipuladores de eventos diretamente.Applications that use the Model-View-ViewModel (MVVM) pattern typically use ICommand rather than wiring up event handlers directly. O TapGestureRecognizer pode facilmente dar suporte ao ICommand definindo a associação no código: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 usando XAML:or using Xaml:

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

O código completo para esse modelo de exibição pode ser encontrado na amostra.The complete code for this view model can be found in the sample. Os detalhes relevantes da implementação de Command são mostrados abaixo: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
}