Xamarin.Forms
Gebaren

Maak een afbeelding aantastbaar door een TapGestureRecognizer toe te voegen

Er zijn een paar standaard herkenners beschikbaar in Xamarin. Formulieren, een daarvan is de TapGestureRecognizer .

Je kunt ze aan vrijwel elk visueel element toevoegen. Bekijk een eenvoudige implementatie die aan een Image bindt. Hier is hoe het in code te doen.

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

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

Of in XAML:

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

Hier wordt de opdracht ingesteld met behulp van gegevensbinding. Zoals u kunt zien, kunt u ook NumberOfTapsRequired om meer tikken in te schakelen voordat er actie wordt ondernomen. De standaardwaarde is 1 tik.

Andere gebaren zijn Pinch en Pan.

Zoom in op een afbeelding met het knijpgebaar

Om een Image (of een ander visueel element) zoombaar te maken, moeten we er een PinchGestureRecognizer aan toevoegen. Hier is hoe het te doen in code:

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

Maar het kan ook worden gedaan vanuit XAML:

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

In de bijbehorende gebeurtenishandler moet u de code opgeven om op uw afbeelding in te zoomen. Natuurlijk kunnen ook andere toepassingen worden geïmplementeerd.

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

Andere gebaren zijn Tikken en pannen.

Toon alle ingezoomde beeldinhoud met de PanGestureRecognizer

Wanneer u een ingezoomde Image (of andere inhoud) heeft, wilt u misschien rond de Image slepen om alle inhoud ervan in de ingezoomde staat te tonen.

Dit kan worden bereikt door de PanGestureRecognizer te implementeren. Van code ziet dit er zo uit:

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

image.GestureRecognizers.Add(panGesture);

Dit kan ook worden gedaan vanuit XAML:

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

In de code-behind-gebeurtenis kunt u de panning nu overeenkomstig verwerken. Gebruik deze methodehandtekening om het af te handelen:

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

Plaats een speld op de plaats waar de gebruiker het scherm met MR.Gestures heeft aangeraakt

Xamarins ingebouwde gebaarherkenning bieden alleen een zeer eenvoudige bediening van de aanraking. Er is bijvoorbeeld geen manier om de positie van een vinger aan te raken. MR.Gestures is een component die 14 verschillende aanraakgebeurtenissen toevoegt. De positie van de aanrakende vingers is onderdeel van de EventArgs die aan alle MR.Gestures-evenementen is doorgegeven.

Als u ergens een pin op het scherm wilt plaatsen, is de eenvoudigste manier om een MR.Gestures.AbsoluteLayout te gebruiken die de Tapping gebeurtenis afhandelt.

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

Zoals u kunt zien, voelt de Tapping="OnTapping" ook meer als .NET dan de syntaxis van Xamarins met de geneste GestureRecognizers . Die syntaxis is gekopieerd van iOS en het ruikt een beetje voor .NET-ontwikkelaars.

In uw code erachter kunt u de OnTapping handler als volgt toevoegen:

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

In plaats van de Tapping gebeurtenis kunt u ook de TappingCommand en binden aan uw ViewModel, maar dat zou de zaken in dit eenvoudige voorbeeld gecompliceerder maken.

Meer voorbeelden voor MR.Gestures zijn te vinden in de GestureSample-app op GitHub en op de MR.Gestures-website . Deze laten ook zien hoe alle andere aanraakgebeurtenissen kunnen worden gebruikt met gebeurtenishandlers, opdrachten, MVVM, ...