Добавление распознавателя жестов касанияAdding a tap gesture recognizer

Скачать пример Скачать примерDownload Sample Download the sample

Жест касания используется для распознавания касания и реализован с помощью класса TapGestureRecognizer.The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class.

Чтобы элемент пользовательского интерфейса можно было выбирать жестом касания, необходимо создать экземпляр TapGestureRecognizer, реализовать обработку события Tapped и добавить новый распознаватель жестов в коллекцию GestureRecognizers элемента пользовательского интерфейса.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. В следующем примере кода показан распознаватель TapGestureRecognizer, присоединенный к элементу Image: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);

По умолчанию изображение будет реагировать на одиночные касания.By default the image will respond to single taps. Для реагирования на двойные (или множественные) касания задайте свойство NumberOfTapsRequired.Set the NumberOfTapsRequired property to wait for a double-tap (or more taps if required).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Если свойство NumberOfTapsRequired имеет значение больше единицы, обработчик событий выполняется только при том условии, что касания были совершены в течение определенного периода времени (настроить его нельзя).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). Если второе или последующие касания не были совершены в течение этого периода, они игнорируются и счетчик касаний сбрасывается.If the second (or subsequent) taps do not occur within that period they are effectively ignored and the 'tap count' restarts.

Использование XAMLUsing Xaml

Распознаватель жестов можно добавить к элементу управления в XAML с помощью присоединенных свойств.A gesture recognizer can be added to a control in Xaml using attached properties. Синтаксис для добавления TapGestureRecognizer к изображению показан ниже (в этом случае определяется событие двойного касания).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>

Код обработчика событий (в этом примере) увеличивает значение счетчика и преобразовывает цветное изображение в черно-белое.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";
    }
}

Использование интерфейса ICommandUsing ICommand

Приложения на основе шаблона "модель — представление — модель представления" (MVVM) обычно используют интерфейс ICommand вместо подключения обработчиков событий напрямую.Applications that use the Model-View-ViewModel (MVVM) pattern typically use ICommand rather than wiring up event handlers directly. Распознаватель TapGestureRecognizer поддерживает ICommand путем настройки привязки в коде: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);

или путем использования XAML:or using Xaml:

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

Полный код для этой модели представления можно найти в примере.The complete code for this view model can be found in the sample. Ниже представлена соответствующая реализация Command.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
}