Share via

ポインター ジェスチャを認識する

  • [アーティクル]

.NET Multi-platform App UI (.NET MAUI) ポインター ジェスチャ認識エンジンは、ポインターがビューに入ったとき、ビューを出たとき、ビュー内を移動したときを検出するもので、PointerGestureRecognizer クラスで実装されます。 このクラスでは、次のプロパティが定義されています。

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

PointerGestureRecognizer クラスでは、次のイベントも定義します。

  • PointerEntered は、ポインターがビューの境界領域に入ったときに発生します。
  • PointerExited は、ビューの境界領域にあるポインターがその境界領域から離れるときに発生します。
  • PointerMoved は、ポインターがビューの境界領域内に留まったまま移動したときに発生します。
  • PointerPressed は、ポインターがビュー内で押され始めたときに発生します。
  • PointerReleased は、ビュー内でそれまでに押され始めていたポインターが離されたときに発生します。

PointerEventArgs オブジェクトはこれらのイベントに付随し、イベントのプラットフォーム固有の引数へのアクセスを提供する PlatformPointerEventArgs 型の PlatformArgs プロパティを定義します。

Android では、PlatformPointerEventArgs クラスは次のプロパティを定義します。

  • Sender: View 型、イベントにアタッチされたネイティブ ビューを表します。
  • MotionEvent: MotionEvent 型、ビューにアタッチされたネイティブ イベントまたはハンドラーを示します。

さらに、PointerEventArgs オブジェクトは、ジェスチャが検出されたときのポインターの位置を表す Point? オブジェクトを返す GetPosition メソッドを定義します。 GetPosition メソッドの詳細については、「ジェスチャの位置を取得する」をご覧ください。

重要

ポインター ジェスチャ認識は、Android、iPadOS、Mac Catalyst、Windows でサポートされています。

.NET MAUI は、PointerOver の表示状態も定義します。 この状態は、マウス カーソルを置いているが押されていない場合に、ビューの外観を変更できます。 詳細については、「表示状態」をご覧ください。

PointerGestureRecognizer を作成する

View 認識ポインター ジェスチャを作成するには、PointerGestureRecognizer オブジェクトを作成し、必要なイベントを処理し、ジェスチャ認識エンジンをビューの GestureRecognizers コレクションに追加します。 または、PointerGestureRecognizer オブジェクトを作成し、必要なコマンドを ICommand 実装にバインドし、ジェスチャ認識エンジンをビューの GestureRecognizers コレクションに追加します。

次のコード例は、Image にアタッチされた PointerGestureRecognizer を示します。 PointerGestureRecognizer はイベントを使用して、ポインター ジェスチャの検出に応答します。

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                  PointerExited="OnPointerExited"
                                  PointerMoved="OnPointerMoved" />
  </Image.GestureRecognizers>
</Image>

イベント ハンドラー用のコードが次の分離コード ファイルに追加されます。

void OnPointerEntered(object sender, PointerEventArgs e)
{
    // Handle the pointer entered event
}

void OnPointerExited(object sender, PointerEventArgs e)
{
    // Handle the pointer exited event
}

void OnPointerMoved(object sender, PointerEventArgs e)
{
    // Handle the pointer moved event
}

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

PointerGestureRecognizer pointerGestureRecognizer = new PointerGestureRecognizer();
pointerGestureRecognizer.PointerEntered += (s, e) =>
{
    // Handle the pointer entered event
};
pointerGestureRecognizer.PointerExited += (s, e) =>
{
    // Handle the pointer exited event
};
pointerGestureRecognizer.PointerMoved += (s, e) =>
{
    // Handle the pointer moved event
};

Image image = new Image();
image.GestureRecognizers.Add(pointerGestureRecognizer);

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

ポインター ジェスチャが発生した位置は、PointerEventArgs オブジェクトで GetPosition メソッドを呼び出すことで取得できます。 GetPosition メソッドは Element? 引数を受け取り、Point? オブジェクトとしての位置を返します。

void OnPointerExited(object sender, PointerEventArgs 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? オブジェクトを返します。