Xamarin.Forms
gester

Gör en tappbar bild genom att lägga till en TapGestureRecognizer

Det finns ett par standardidentifierare tillgängliga i Xamarin.Forms, en av dem är TapGestureRecognizer .

Du kan lägga till dem i praktiskt taget alla visuella element. Titta på en enkel implementering som binder till en Image . Så här gör du i kod.

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

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

Eller i XAML:

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

Här ställs kommandot in genom att använda databindning. Som du ser kan du också ställa in NumberOfTapsRequired att aktivera den för fler kranar innan den vidtar åtgärder. Standardvärdet är 1 tryck.

Andra gester är Pinch and Pan.

Zooma in en bild med nypgesten

För att göra en Image (eller något annat visuellt element) zoombar måste vi lägga till en PinchGestureRecognizer till den. Så här gör du i kod:

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

Men det kan också göras från XAML:

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

I den åtföljande händelseshanteraren ska du ange koden för att zooma in din bild. Naturligtvis kan andra användningsområden också implementeras.

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

Andra gester är Tap and Pan.

Visa allt zoomat bildinnehåll med PanGestureRecognizer

När du har en zoomad Image (eller annat innehåll) kanske du vill dra runt Image att visa allt dess innehåll i det zoomade in-läget.

Detta kan uppnås genom att implementera PanGestureRecognizer. Från kod ser detta så ut:

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

image.GestureRecognizers.Add(panGesture);

Detta kan också göras från XAML:

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

I koden bakom händelsen kan du nu hantera panoreringen i enlighet därmed. Använd den här metodsignaturen för att hantera den:

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

Placera en stift där användaren rörde skärmen med MR.Gestures

Xamarins inbyggda gestigenkännare ger endast mycket grundläggande beröringshantering. Exempelvis finns det inget sätt att få positionen som ett rörande finger. MR.Gestures är en komponent som lägger till 14 olika beröringshändelser. Positionerna för de rörande fingrarna är en del av EventArgs överförs till alla MR.Gestures-händelser.

Om du vill placera en stift var som helst på skärmen är det enklaste sättet att använda en MR.Gestures.AbsoluteLayout som hanterar Tapping händelsen.

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

Som du kan se Tapping="OnTapping" känns också mer som .NET än Xamarins syntax med de kapslade GestureRecognizers . Denna syntax kopierades från iOS och luktar lite för .NET-utvecklare.

I din kod bakom kan du lägga till OnTapping hanteraren så här:

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

I stället för Tapping händelsen, kan du också använda TappingCommand och binda till din ViewModel, men det skulle komplicera saker i detta enkla exempel.

Fler prover för MR.Gestures kan hittas i GestureSample-appen på GitHub och på MR.Gestures-webbplatsen . Dessa visar också hur man använder alla andra touchevenemang med händelseshanterare, kommandon, MVVM, ...