Xamarin.Forms
ジェスチャー

TapGestureRecognizerを追加して画像をタップ可能にする

Xamarin.Formsにはいくつかのデフォルト認識があり、そのうちの1つはTapGestureRecognizerです。

ほとんどすべてのビジュアル要素に追加できます。 Imageバインドする簡単な実装を見てみましょう。ここでコードでそれを行う方法です。

var tappedCommand = new Command(() =>
{
    //handle the tap
});

var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand };
image.GestureRecognizers.Add(tapGestureRecognizer);

またはXAML：

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Command="{Binding TappedCommand}"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

ここでは、コマンドはデータバインディングを使用して設定されます。ご覧のように、 NumberOfTapsRequiredを設定して、より多くのタップを有効にしてからアクションを実行することもできます。デフォルト値は1タップです。

他のジェスチャーはピンチとパンです。

ピンチジェスチャーで画像をズームする

Image （または他の視覚的要素）をズーム可能にするには、 PinchGestureRecognizerを追加するPinchGestureRecognizerがあります。コードでこれを行う方法は次のとおりです。

var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => {
// Handle the pinch
};
    
image.GestureRecognizers.Add(pinchGesture);

しかし、XAMLからも行うことができます。

<Image Source="waterfront.jpg">
  <Image.GestureRecognizers>
    <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
  </Image.GestureRecognizers>
</Image>

付随イベントハンドラでは、画像をズームするためのコードを提供する必要があります。もちろん、他の用途も実装することができます。

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
    // ... code here
}

他のジェスチャーはタップとパンです。

PanGestureRecognizerでズームされた画像コンテンツをすべて表示する

あなたがズームしていたときImage （または他のコンテンツを）あなたは周りにドラッグすることもできますImageの状態でズームで、その内容のすべてを表示します。

これはPanGestureRecognizerを実装することで実現できます。コードから、これは次のようになります：

var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
  // Handle the pan
};

image.GestureRecognizers.Add(panGesture);

これは、XAMLからも行うことができます。

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

コードビハインドイベントでは、これに応じてパンを処理できるようになりました。このメソッドのシグネチャを使用して処理します。

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  // Handle the pan
}

ユーザーがMR.Gesturesで画面に触れた場所にピンを配置する

ジェスチャー認識器で構築されたXamarinsは、非常に基本的なタッチ操作しか提供しません。例えば、接触している指の位置を得る方法はありません。 MR.Gesturesは、14種類のタッチ操作イベントを追加するコンポーネントです。タッチする指の位置は、すべてのMR.Gesturesイベントに渡されるEventArgs一部です。

画面上のどこにでもピンを配置したい場合は、 Tappingイベントを処理するMR.Gestures.AbsoluteLayoutを使用するのが最も簡単な方法です。

<mr:AbsoluteLayout x:Name="MainLayout" Tapping="OnTapping">
    ...
</mr:AbsoluteLayout>

ご覧のように、 Tapping="OnTapping"は、ネストされたGestureRecognizersしたXamarins構文よりも.NETに似ています。その構文はiOSからコピーされ、.NET開発者にとってはちょっと匂いがする。

あなたのコードでは、 OnTappingようにOnTappingハンドラを追加することができます：

private void OnTapping(object sender, MR.Gestures.TapEventArgs e)
{
    if (e.Touches?.Length > 0)
    {
        Point touch = e.Touches[0];
        var image = new Image() { Source = "pin" };
        MainLayout.Children.Add(image, touch);
    }
}

Tappingイベントの代わりに、 TappingCommandを使用してViewModelにバインドすることもできますが、この単純な例では複雑になります。

MR.Gesturesのサンプルは、GitHubのGestureSampleアプリとMR.GesturesのWebサイトにあります。これらはまた、イベントハンドラ、コマンド、MVVMなどの他のすべてのタッチイベントを使用する方法を示しています...