Xamarin.Forms
Gesten

Machen Sie ein Bild tappbar, indem Sie einen TapGestureRecognizer hinzufügen

In TapGestureRecognizer sind einige Standarderkennungen verfügbar. Formulare, einer davon ist der TapGestureRecognizer .

Sie können sie zu praktisch jedem visuellen Element hinzufügen. Schauen Sie sich eine einfache Implementierung an, die an ein Image . So geht es im Code.

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

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

Oder in XAML:

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

Hier wird der Befehl über die Datenbindung festgelegt. Wie Sie sehen, können Sie NumberOfTapsRequired auch so einstellen, dass weitere Taps aktiviert werden, bevor Aktionen ausgeführt werden. Der Standardwert ist 1 Tippen.

Andere Gesten sind Pinch und Pan.

Zoomen Sie ein Bild mit der Pinch-Geste

Um ein Image (oder ein anderes visuelles Element) PinchGestureRecognizer zu machen, müssen wir einen PinchGestureRecognizer hinzufügen. So machen Sie es im Code:

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

Es kann aber auch von XAML aus gemacht werden:

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

Im begleitenden Event-Handler sollten Sie den Code zum Zoomen Ihres Bildes angeben. Natürlich können auch andere Anwendungen implementiert werden.

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

Andere Gesten sind Tap und Pan.

Zeigen Sie den gesamten vergrößerten Bildinhalt mit PanGestureRecognizer an

Wenn Sie ein vergrößertes Image (oder einen anderen Inhalt) haben, können Sie das Image , um seinen gesamten Inhalt im vergrößerten Zustand anzuzeigen.

Dies kann durch die Implementierung des PanGestureRecognizers erreicht werden. Aus dem Code sieht das so aus:

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

image.GestureRecognizers.Add(panGesture);

Dies kann auch über XAML erfolgen:

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

Im Code-Behind-Event können Sie das Verschieben jetzt entsprechend behandeln. Verwenden Sie diese Methodensignatur, um damit umzugehen:

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

Platzieren Sie eine Nadel an der Stelle, an der der Benutzer den Bildschirm mit MR.Gestures berührt hat

In Xamarins integrierte Gestenerkennungsfunktionen bieten nur sehr grundlegende Berührungsfunktionen. Es gibt zB keine Möglichkeit, die Position eines berührenden Fingers zu ermitteln. MR.Gestures ist eine Komponente, die 14 verschiedene Touch-Handling-Ereignisse hinzufügt. Die Position der berührenden Finger ist Teil der EventArgs die an alle MR.Gestures-Ereignisse übergeben werden.

Wenn Sie eine Pin an einer beliebigen Stelle auf dem Bildschirm platzieren möchten, verwenden Sie am besten ein MR.Gestures.AbsoluteLayout das das Tapping Ereignis behandelt.

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

Wie Sie sehen, fühlt sich das Tapping="OnTapping" auch eher mit .NET als mit der Xamarins-Syntax mit den verschachtelten GestureRecognizers . Diese Syntax wurde von iOS kopiert und riecht ein wenig für .NET-Entwickler.

In Ihrem Code dahinter könnten Sie den OnTapping Handler folgendermaßen hinzufügen:

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);
    }
}

Anstelle des Tapping Ereignisses können Sie auch den TappingCommand und an Ihr ViewModel binden. TappingCommand würde jedoch die Dinge in diesem einfachen Beispiel komplizieren.

Weitere Beispiele für MR.Gestures finden Sie in der GestureSample-App auf GitHub und auf der MR.Gestures-Website . Diese zeigen auch, wie alle anderen Berührungsereignisse mit Ereignishandlern, Befehlen, MVVM, ... verwendet werden.