Incorporación de un reconocedor de gesto de pulsar

  • Artículo

Download SampleDescargar el ejemplo

El gesto de pulsar se usa para la detección de pulsaciones y se implementa con la clase TapGestureRecognizer.

Para que se pueda hacer clic en un elemento de interfaz de usuario con el gesto de pulsar, cree una instancia de TapGestureRecognizer, controle el evento Tapped, y agregue el nuevo reconocedor de gestos a la colección GestureRecognizers en el elemento de interfaz de usuario. En el siguiente ejemplo de código, se muestra un elemento TapGestureRecognizer asociado a un elemento Image:

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

De forma predeterminada, la imagen responderá a pulsaciones simples. Establezca la propiedad NumberOfTapsRequired para que espere una pulsación doble (o más pulsaciones si es necesario).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Cuando se establece NumberOfTapsRequired por encima de uno, el controlador de eventos solo se ejecuta si las pulsaciones se producen dentro de un período de tiempo concreto (que no se puede configurar). Si la segunda pulsación (o las posteriores) no se producen dentro de ese período, se omiten y se reinicia el "recuento de pulsaciones".

Uso de Xaml

Un reconocedor de gestos se puede agregar a un control en Xaml mediante propiedades adjuntas. La sintaxis para agregar un elemento TapGestureRecognizer a una imagen se muestra a continuación (en este caso se define un evento de pulsación doble):

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

El código para el controlador de eventos (en el ejemplo) incrementa un contador y cambia la imagen de color a blanco y negro.

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 de ICommand

Las aplicaciones que usan el patrón Model-View-ViewModel (MVVM) suelen usar ICommand en lugar de conectar controladores de eventos directamente. El elemento TapGestureRecognizer puede admitir fácilmente ICommand estableciendo el enlace en el código:

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

o con Xaml:

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

El código completo para este modelo de vista se puede encontrar en el ejemplo. A continuación se muestran los detalles de implementación de Command relevantes:

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
}