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などの他のすべてのタッチイベントを使用する方法を示しています...