Charles Petzold Touch Input

Agenda Mouse events Frame.TouchReported events Manipulation events GestureListener events

Primary touch events promoted to mouse events –MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, MouseEnter, MouseLeave –"Primary" means first finger down Build touch interfaces using mouse logic only –Same code works in Silverlight desktop apps Single-touch only! Mouse Events

Responding to Touch // XAML <Rectangle Width="300" Height="200" Fill="Red" MouseLeftButtonDown="OnRectangleClicked" /> // C# void OnRectangleClicked(object sender, RoutedEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); }

demo Mouse Events

Low-level touch events fired by Silverlight –Up to four fingers at a time –Fired at application level, not by individual objects Information regarding individual fingers conveyed in TouchPoint objects revealing: –Whether finger went down, moved, or lifted up –Finger position relative to specified UI element –Contact area size –Topmost element underneath finger and finger ID Primary touch points promoted to mouse events Touch.FrameReported Events

Handling Touch.FrameReported Touch.FrameReported += OnFrameReported;. void OnFrameReported(object sender, TouchFrameEventArgs e) { // TODO: Act on touch input }

TouchFrameEventArgs Class MethodDescription GetPrimaryTouchPoint Returns a TouchPoint object representing primary touch point (first finger to contact screen) GetTouchPoints Returns a TouchPointCollection containing one TouchPoint object for each finger currently in contact with the screen SuspendMousePromotion- UntilTouchUp Suspends promotion of primary touch events to mouse events until all fingers have left the screen PropertyDescription Timestamp Time at which event occurred, expressed as ticks (milliseconds)

TouchPoint Class PropertyDescription Action Indicates whether a finger touched the screen (Down), moved across the screen (Move), or left the screen (Up) Position Location of the touch event in pixel coordinates relative to the upper-left corner of the object passed to GetPrimaryTouchPoint or GetTouchPoints Size Width and height (in pixels) of the touch point TouchDevice Returns a reference to a TouchDevice object representing the finger that precipitated the touch event. Use TouchDevice's Id property to identify the finger, or its DirectlyOver property to identify the topmost object under the touch point

Responding to Touch // XAML // C# Touch.FrameReported += OnFrameReported;... void OnFrameReported(object sender, TouchFrameEventArgs e) { // Single touch only TouchPoint point = e.GetPrimaryTouchPoint(null); if (point.Action == TouchAction.Down && point.TouchDevice.DirectlyOver == Rect) { Rect.Fill = new SolidColorBrush(Colors.Blue); }

Responding to Multi-Touch // XAML // C# Touch.FrameReported += OnFrameReported;... void OnFrameReported(object sender, TouchFrameEventArgs e) { TouchPointCollection points = e.GetTouchPoints(null); foreach (TouchPoint point in points) { if (point.Action == TouchAction.Down && point.TouchDevice.DirectlyOver == Rect) Rect.Fill = new SolidColorBrush(Colors.Blue); }

demo Touch.FrameReported Events

High-level touch events fired by UI elements –Do not support simultaneous manipulation –Perform implicit capture when element is moved Built-in inertia support –Velocity info in ManipulationCompleted events –You provide logic to use the velocity info Consolidate interaction of two fingers into X and Y scaling factors for pinch-zooming Manipulation Events

EventDescription ManipulationStarted Fired when a manipulation begins ManipulationDelta Fired when a finger moves during a manipulation ManipulationCompleted Fired when a manipulation ends

Moving a UI Element // XAML // C# private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; transform.TranslateX += e.DeltaManipulation.Translation.X; transform.TranslateY += e.DeltaManipulation.Translation.Y; }

Scaling a UI Element // XAML // C# private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e) { if (e.DeltaManipulation.Scale.X > 0.0 && e.DeltaManipulation.Scale.Y > 0.0) { Rectangle rect = sender as Rectangle; ScaleTransform transform = rect.RenderTransform as ScaleTransform; transform.ScaleX *= e.DeltaManipulation.Scale.X; transform.ScaleY *= e.DeltaManipulation.Scale.Y; }

ManipulationCompletedEventArgs properties expose velocity information –IsInertial – True if finger was moving when it left the screen, false if not –FinalVelocities.LinearVelocity.X –FinalVelocities.LinearVelocity.Y –FinalVelocities.ExpansionVelocity.X –FinalVelocities.ExpansionVelocity.Y Use these properties to simulate inertia –e.g., start animation to continue motion Inertia

Simulating Horizontal Inertia private void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e) { if (e.IsInertial) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; InertiaAnimation.To = transform.X + e.FinalVelocities.LinearVelocity.X / 10.0; InertiaStoryboard.Begin(); }

demo Manipulation Events

Three ways to support gestures –Roll your own using Touch.FrameReported events –Use the XNA Framework's TouchPanel class –Use the Silverlight for Windows Phone Toolkit's GestureListener class GestureListener makes it easy –Event-based API recognizes six basic gestures –No simultaneous manipulation of UI elements –Microsoft.Phone.Controls.Toolkit assembly Gestures

Gesture Types GestureListener supports six gestures –Tap –Double tap –Tap and hold –Drag or pan –Flick –Pinch Pinch gestures can be used for scaling, rotation, or both

GestureListener Events EventDescription Tap Indicates that a UI element has been tapped DoubleTap Indicates that a UI element has been double-tapped Hold Indicates that a tap-and-hold has occurred over a UI element Flick Indicates that a UI element has been flicked DragStarted Indicates that a drag gesture has started DragDelta Indicates that a drag gesture is ongoing DragCompleted Indicates that a drag gesture has ended GestureStarted Indicates that a gesture has begun (fired at beginning of every gesture) GestureCompleted Indicates that a gesture has ended (fired at end of every gesture) PinchStarted Indicates that a pinch gesture has started PinchDelta Indicates that a pinch gesture is ongoing PinchCompleted Indicates that a pinch gesture has ended

Responding to Taps // XAML // C# private void OnTap(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Tap GestureCompleted GestureBegin Tap GestureCompleted

Responding to Double Taps // XAML // C# private void OnDoubleTap(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Tap GestureCompleted GestureBegin DoubleTap GestureCompleted GestureBegin Tap GestureCompleted GestureBegin DoubleTap GestureCompleted

Responding to Holds // XAML // C# private void OnHold(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Hold GestureCompleted GestureBegin Hold GestureCompleted

Moving a UI Element // XAML // C# private void OnDragDelta(object sender, DragDeltaGestureEventArgs e) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; transform.X += e.HorizontalChange; transform.Y += e.VerticalChange; } GestureBegin DragStarted DragDelta... DragDelta DragCompleted GestureCompleted GestureBegin DragStarted DragDelta... DragDelta DragCompleted GestureCompleted

Responding to Flicks // XAML // C# private void OnFlick(object sender, FlickEventArgs e) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; InertiaAnimation.To = transform.X + e.HorizontalVelocity / 10.0; InertiaStoryboard.Begin(); } GestureBegin DragStarted DragDelta... Flick DragCompleted GestureCompleted GestureBegin DragStarted DragDelta... Flick DragCompleted GestureCompleted

Scaling a UI Element // XAML // C# private void PinchDelta(object sender, PinchGestureEventArgs e) { Rectangle rect = sender as Rectangle; ScaleTransform transform = rect.RenderTransform as ScaleTransform; transform.ScaleX = _cx * e.DistanceRatio; transform.ScaleY = _cy * e.DistanceRatio; } GestureBegin PinchStarted PinchDelta... PinchDelta PinchCompleted GestureCompleted GestureBegin PinchStarted PinchDelta... PinchDelta PinchCompleted GestureCompleted

Rotating a UI Element // XAML // C# private void PinchDelta(object sender, PinchGestureEventArgs e) { Rectangle rect = sender as Rectangle; RotateTransform transform = rect.RenderTransform as RotateTransform; transform.Rotation = e.TotalAngleDelta; } GestureBegin PinchStarted PinchDelta... PinchDelta PinchCompleted GestureCompleted GestureBegin PinchStarted PinchDelta... PinchDelta PinchCompleted GestureCompleted

demo GestureListener Events

Charles Petzold Questions?