1. Touch and Gestures with Xamarin Forms
Tap, Pinch and so on
Xamarin apps for iOS, Android & WinPhone
Telerik School Academy

2. Table of Contents Gestures overview Types of gestures
Pinch, rotate, swipe, double tap, long press, tap, fling
Using TapGestureRecognizer
Adding support for other gestures

3. Touch and Gestures
Overview

4. Touch & Gestures
Touch is the main form of input used on mobile devices
Every view is capable of handling Touch events
Touches are actions the users perform with their fingers or stylus pen
One-finger touches and multi-finger touches
A gesture is a predefined combination of touch actions
i.e. touch down and then touch move is called a Pan gesture

5. Types of Gestures Tap gesture Double tap gesture Long press gesture
Like click but with a finger on a touch device
Double tap gesture
Like a double click but with a finger on a touch device
Long press gesture
Put a finger on the screen and hold it for a brief time

6. Types of Gestures Scroll gesture Pan gesture Flick/Swipe gesture
Put a finger on the screen and move it up and down
Pan gesture
Put a finger on the screen and move it
Flick/Swipe gesture
Put a finger on the screen and move it really fast

7. Types of Gestures Pinch-in gesture Pinch-out/Zoom gesture
Put two fingers on the screen and move them closer
Pinch-out/Zoom gesture
Put two fingers on the screen and move them further
Rotate gesture
Put two fingers on the screen and move one of them in a circle

8. Types of Gestures Every mobile platform supports these gestures
Their names can vary
Zoom is Scale on Android /WP8 and Pinch on iOS
A good visual on the gestures can be found in Wikipedia:
touch_gestures

9. Gestures in Xamarin Forms
Lets get practical

10. Gestures in Xamarin Forms
Every Control in Xamarin form can handle gestures
Labels, Buttons, StackLayouts, etc…
Everything that descends from Xamarin.Forms.View
Yet, as of December 2014, Xamarin Forms supports only Tap gestures
Tap, Double tap, Triple tap, etc..
Other gestures must be implemented OS specific

11. INSERT XAML CODE HERE Handling Tap Gestures
To handle a tap gesture in Xamarin forms, use TapGestureRecognizer
Can be defined in code
//other code
var tapGesture = new TapGestureRecognizer();
tapGesture.Tapped += this.HandleTapGesture;
view.GestureRecognizers.Add(tapGesture);
Or with XAML
INSERT XAML CODE HERE

12. Handling Tap Gestures
Live Demo

13. Handling Other Gestures
Like Long press, Pan and Pinch

14. Handle Other Gestures in Xamarin Forms
To handle other gestures in Xamarin Forms:
Inherit the control you need the gestures on
i.e. if you want to add gestures to Label, create GesturedLabel
Expose public events for the needed gestures
Create a Renderer for each platform
In the Renderer, handle the gestures and bubble them to your control

15. Handle Pinch on WP8
Inherit the Label in the SAP or PCL and expose public events
public class GesturedLabel: Label {
public event EventHandler<PinchEventArgs> Pinch;
public void OnPinch(PinchEventArgs args); }
Create a PinchEventArgs to hold the state of the gesture
public class PinchEventArgs: EventArgs {
public double ScaleFactor {get; set;} }

16. Handle Pinch on WP8 Create a Renderer for each platform Export it
public class GesturedLabelWPRenderer : LabelRenderer { }
Export it
[assembly: ExportRenderer(typeof(GesturedLabel),
typeof(GesturedLabelWPRenderer))]
Override the OnElementChanged() method
public override OnElementChanged(… e) {
base.OnElementChanged(e);
this.Control.ManipulationDelta += this.HandlePinch; }

17. Handle Pinch on WP8 In the Pinch handler: Get the scale factor
And fire the OnPinch event we created on the GesturedLabel
private void HandleManipulationDelta(object sender,
ManipulationDeltaEventArgs e) {
var gesturedLabel = this.Element as GesturedLabel;
if (gesturedLabel == null) { return; }
var pinchEventArgs = new PinchEventArgs
{ ScaleFactor = e.DeltaManipulation.Scale.X};
gesturedLabel.OnPinched(pinchEventArgs); }

18. Pinch Gesture on WindowsPhone
Live Demo

19. Handle Long Press on Android
Configuring gestures on Android is a little harder than on WindowsPhone
A specific gesture listener must be created, to handle the events
class GestureLabelListener
:GestureDetector. SimpleOnGestureListener {
public override void OnLongPress(MotionEvent e)
var args = new TapEventEvents(e.GetX(), e.GetY());
this.Element.OnLongPress(args);
base.OnLongPress(e); }

20. Handle Long Press on Android
Then in the GesturedLabelAndroidRenderer:
class GesturedLabelAndroidRenderer : LabelRenderer {
readonly GestureDetector detector;
readonly GesturedLabelListener listener;
public GesturedLabelAndroidRenderer() {
this.listener = new GesturedLabelListener();
this.detector = new GestureDetector(this.listener); }
override void OnElementChanged(…) {
// unregister events if e.NewElement is null
var element = this.Element as GesturedLabel;
this.listener.Element = element;
this.GenericMotion += (snd, e) =>
this.detector.OnTouchEvent(e.Event);
this.Touch += (snd, e) => this.detector.OnTouchEvent(e.Event);

21. LongPress Gesture on Android
Live Demo

22. Handle Swipe Gesture on iOS

23. Swipe Gesture on iOS
Live Demo

24. Touch and Gestures with Xamarin Forms