Adicionar um reconhecedor de gestos de toque

  • Artigo

Download Sample Baixe o exemplo

O gesto de toque é usado para detecção de toque e é implementado com a classe TapGestureRecognizer.

Para que seja possível clicar em um elemento da interface do usuário com um gesto de toque, crie uma instância de TapGestureRecognizer, manipule o evento Tapped e adicione o novo reconhecedor de gestos à coleção GestureRecognizers no elemento de interface do usuário. O exemplo de código a seguir mostra um TapGestureRecognizer anexado a um elemento Image:

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

Por padrão, a imagem responderá a toques único. Configure a propriedade NumberOfTapsRequired para aguardar um toque duplo (ou mais toques se necessário).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Quando NumberOfTapsRequired é configurado como mais de um, o manipulador de eventos é executado somente quando os toques ocorrem em um período definido (esse período não é configurável). 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.

Usando XAML

Um reconhecedor de gestos pode ser adicionado a um controle em XAML usando propriedades anexadas. A sintaxe para adicionar um TapGestureRecognizer a uma imagem é mostrada abaixo (nesse caso, definindo um evento de toque duplo):

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

O código do manipulador de eventos (no exemplo) incrementa um contador e altera a imagem de cor para preto e branco.

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 ICommand

Aplicativos que usam o padrão MVVM (Model-View-ViewModel) normalmente usam ICommand em vez de conectar manipuladores de eventos diretamente. O TapGestureRecognizer pode facilmente dar suporte a ICommand definindo a associação no código:

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

ou usando 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. Os detalhes relevantes da implementação de Command são mostrados abaixo:

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
}