Touch and Gestures with Xamarin Forms Tap, Pinch and so on Xamarin apps for iOS, Android & WinPhone Telerik School Academy http://schoolacademy.telerik.com

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

Touch and Gestures Overview

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

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

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

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

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: http://en.wikipedia.org/wiki/Multi-touch#Multi- touch_gestures

Gestures in Xamarin Forms Lets get practical

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

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

Handling Tap Gestures Live Demo

Handling Other Gestures Like Long press, Pan and Pinch

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

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

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

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

Pinch Gesture on WindowsPhone Live Demo

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

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

LongPress Gesture on Android Live Demo

Handle Swipe Gesture on iOS

Swipe Gesture on iOS Live Demo

Touch and Gestures with Xamarin Forms http://academy.telerik.com