タップ ジェスチャの認識

.NET Multi-Platform App UI (.NET MAUI) のタップ ジェスチャ認識エンジンは、タップ検出に使用され、TapGestureRecognizer クラスで実装されます。 このクラスでは、次のプロパティが定義されています。

  • Buttons (ButtonsMask 型): Android、Mac Catalyst、Windows でジェスチャをトリガーするのがプライマリ マウス ボタンかセカンダリ マウス ボタンか、またはその両方かを定義します。 詳細については、「ボタン マスクを定義する」をご覧ください。
  • Command (ICommand 型): タップが認識されたときに実行されます。
  • CommandParameter: object 型、Command に渡されるパラメーター。
  • NumberOfTapsRequired (int 型): タップ ジェスチャを認識するために必要なタップの数を表します。 このプロパティの既定値は 1です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

TapGestureRecognizer クラスは、タップが認識されると発生する Tapped イベントも定義します。 Tapped イベントに付随する TappedEventArgs オブジェクトは、CommandParameter プロパティが定義されている場合にそれによって渡される値を示す object 型の Parameter プロパティを定義します。 TappedEventArgs オブジェクトは、Buttons プロパティと GetPosition メソッドも定義します。 Buttons プロパティは ButtonsMask 型で、Android、Mac Catalyst、Windows でプライマリ マウス ボタンかセカンダリ マウス ボタンのどちらでジェスチャ認識エンジンがトリガーされたかを判断するために使用できます。 GetPosition メソッドは、タップ ジェスチャが検出された位置を表す Point? オブジェクトを返します。 ボタン マスクの詳細については、「ボタン マスクを定義する」をご覧ください。 GetPosition メソッドの詳細については、「ジェスチャの位置を取得する」をご覧ください。

警告

Windows の TapGestureRecognizer では、ダブル タップ以上を認識できません。

TapGestureRecognizer を作成する

View にタップ ジェスチャを認識させるには、TapGestureRecognizer オブジェクトを作成し、Tapped イベントを処理し、新しいジェスチャ認識エンジンをビューの GestureRecognizers コレクションに追加します。 次のコード例は、Image にアタッチされている TapGestureRecognizer を示します。

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
                              NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

OnTapGestureRecognizerTapped イベント ハンドラーのコードを分離コード ファイルに追加します。

void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
{
    // Handle the tap
}

同等の C# コードを次に示します。

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

既定で、Image はシングル タップに応答します。 NumberOfTapsRequired プロパティを 1 より大きい値に設定すると、設定された期間内にタップが発生した場合にのみ、イベント ハンドラーが実行されます。 2 回目 (またはそれ以降) のタップがその期間内に発生しない場合は、タップは実質的に無視されます。

ボタン マスクを定義する

TapGestureRecognizer オブジェクトには Buttons プロパティ (ButtonsMask 型) があり、Android、Mac Catalyst、Windows でプライマリ マウス ボタンかセカンダリ マウス ボタン、またはその両方がジェスチャをトリガーするかを定義します。 ButtonsMask 列挙型は、次のメンバーを定義します。

  • Primary: プライマリ マウス ボタン (通常はマウスの左ボタン) を表します。
  • Secondary: セカンダリ マウス ボタン (通常はマウスの右ボタン) を表します。

次の例は、セカンダリ マウス ボタンでのタップを検出する TapGestureRecognizer を示しています。

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
                              Buttons="Secondary" />
  </Image.GestureRecognizers>
</Image>

Tapped イベントのイベント ハンドラーは、ジェスチャをトリガーしたボタンを判断できます。

void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
{
    // Handle the tap
    if (args.Buttons == ButtonsMask.Secondary)
    {
        // Do something
    }
}

同等の C# コードを次に示します。

TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
{
    Buttons = ButtonsMask.Secondary
};
tapGestureRecognizer.Tapped += (s, e) =>
{
    // Handle the tap
    if (args.Buttons == ButtonsMask.Secondary)
    {
        // Do something
    }
};
Image image = new Image();
image.GestureRecognizers.Add(tapGestureRecognizer);

警告

Windows では、Buttons プロパティを Secondary に設定する TapGestureRecognizer は、NumberOfTapsRequired プロパティが 1 より大きい場合、そのプロパティを無視します。

さらに、プライマリ マウス ボタンかセカンダリ マウス ボタンのどちらかがジェスチャをトリガーするように、TapGestureRecognizer を定義できます。

<TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
                      Buttons="Primary,Secondary" />

同等の C# コードを次に示します。

TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
{
    Buttons = ButtonsMask.Primary | ButtonsMask.Secondary
};

ジェスチャの位置を取得する

タップ ジェスチャが発生した位置を取得するには、TappedEventArgs オブジェクトで GetPosition メソッドを呼び出します。 GetPosition メソッドは、Element? 引数を受け取り、位置を Point? オブジェクトとして返します。

void OnTapGestureRecognizerTapped(object sender, TappedEventArgs e)
{
    // Position inside window
    Point? windowPosition = e.GetPosition(null);

    // Position relative to an Image
    Point? relativeToImagePosition = e.GetPosition(image);

    // Position relative to the container view
    Point? relativeToContainerPosition = e.GetPosition((View)sender);
}

Element? 引数は、位置を取得する必要がある要素を定義します。 この引数として null 値を指定すると、GetPosition メソッドは、ウィンドウ内のタップ ジェスチャの位置を定義する Point? オブジェクトを返します。