Xamarin.Forms
Gesti

Crea un'immagine toccabile aggiungendo un TapGestureRecognizer

Sono disponibili un paio di riconoscitori predefiniti in Xamarin.Forms, uno dei quali è il TapGestureRecognizer .

Puoi aggiungerli praticamente a qualsiasi elemento visivo. Dai un'occhiata a una semplice implementazione che si lega a Image . Ecco come farlo in codice.

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

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

O in XAML:

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

Qui il comando viene impostato utilizzando l'associazione dati. Come puoi vedere puoi anche impostare NumberOfTapsRequired per abilitarlo per più tap prima che entri in azione. Il valore predefinito è 1 tocco.

Altri gesti sono Pizzico e Pan.

Ingrandisci un'immagine con il gesto di pizzica

Per rendere zoomabile Image (o qualsiasi altro elemento visivo) dobbiamo aggiungere un PinchGestureRecognizer ad esso. Ecco come farlo nel codice:

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

Ma può anche essere fatto da XAML:

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

Nel gestore di eventi accompagnato dovresti fornire il codice per ingrandire l'immagine. Ovviamente anche altri usi possono essere implementati.

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

Altri gesti sono Tap e Pan.

Mostra tutto il contenuto dell'immagine ingrandito con PanGestureRecognizer

Quando si ha una zoomata Image (o altri contenuti) si consiglia di trascinare tutto Image per mostrare tutti i suoi contenuti nello zoom Stato.

Questo può essere ottenuto implementando il PanGestureRecognizer. Dal codice questo sembra così:

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

image.GestureRecognizers.Add(panGesture);

Questo può essere fatto anche da XAML:

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

Nell'evento code-behind ora puoi gestire il panning di conseguenza. Utilizzare questa firma del metodo per gestirla:

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

Posiziona un segnaposto dove l'utente ha toccato lo schermo con MR.Gestures

Gli Xamarin integrati nei riconoscitori di gesti forniscono solo una gestione tattile molto semplice. Ad esempio, non c'è modo di ottenere la posizione di un dito commovente. MR.Gestures è un componente che aggiunge 14 diversi eventi di gestione del tocco. La posizione delle dita toccando fa parte delle EventArgs passati a tutti gli eventi MR.Gestures.

Se si desidera posizionare un pin in qualsiasi punto dello schermo, il modo più semplice è utilizzare MR.Gestures.AbsoluteLayout che gestisce l'evento Tapping .

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

Come puoi vedere il Tapping="OnTapping" sembra più simile a .NET rispetto alla sintassi Xamarins con GestureRecognizers nidificati. Quella sintassi è stata copiata da iOS e ha un odore un po 'per gli sviluppatori .NET.

Nel tuo codice OnTapping potresti aggiungere il gestore di OnTapping questo modo:

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

Invece dell'evento Tapping , è possibile utilizzare anche il TappingCommand e collegarlo al ViewModel, ma ciò complicherebbe le cose in questo semplice esempio.

Altri esempi di MR.Gestures possono essere trovati nell'app GestureSample su GitHub e sul sito Web MR.Gestures . Questi mostrano anche come utilizzare tutti gli altri eventi touch con gestori di eventi, comandi, MVVM, ...