タップ ジェスチャ認識エンジンの追加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. Image 要素にアタッチされている TapGestureRecognizer のコード例を次に示します。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);

既定で、画像は 1 回のタップに応答します。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 を 1 を超える値に設定すると、設定された期間内にタップが発生した場合にのみ、イベント ハンドラーが実行されます (この期間は構成できません)。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). 2 回目 (またはそれ以降の) タップがその期間内に発生しない場合は、実質的に無視され、'タップのカウント' が再開されます。If the second (or subsequent) taps do not occur within that period they are effectively ignored and the 'tap count' restarts.

Xaml を使用するUsing 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";
    }
}

ICommand の使用Using ICommand

Model-View-ViewModel (MVVM) パターンを使用するアプリケーションでは、通常、イベント ハンドラーを直接接続するのではなく、ICommand を使用します。Applications that use the Model-View-ViewModel (MVVM) pattern typically use ICommand rather than wiring up event handlers directly. TapGestureRecognizerICommand を簡単にサポートするには、次のようにコードにバインドを設定するか、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
}