1 / 31

Charles Petzold charlespetzold

Touch Input. Charles Petzold www.charlespetzold.com. Agenda. Mouse events Frame.TouchReported events Manipulation events GestureListener events. Mouse Events. Primary touch events promoted to mouse events MouseLeftButtonDown , MouseLeftButtonUp , MouseMove , MouseEnter , MouseLeave

eyad
Download Presentation

Charles Petzold charlespetzold

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Touch Input Charles Petzold www.charlespetzold.com

  2. Agenda • Mouse events • Frame.TouchReported events • Manipulation events • GestureListener events

  3. Mouse 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!

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

  5. Mouse Events

  6. Touch.FrameReported 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

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

  8. TouchFrameEventArgs Class

  9. TouchPoint Class

  10. Responding to Touch // XAML <Rectangle x:Name="Rect" Width="300" Height="200" Fill="Red" /> // 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); } }

  11. Responding to Multi-Touch // XAML <Rectangle x:Name="Rect" Width="300" Height="200" Fill="Red" /> // 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); } }

  12. Touch.FrameReported Events

  13. Manipulation 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

  14. Manipulation Events

  15. Moving a UI Element // XAML <Rectangle ... Fill="Red" ManipulationDelta="OnManipulationDelta"> <Rectangle.RenderTransform> <TranslateTransform /> </Rectangle.RenderTransform> </Rectangle> // C# private void OnManipulationDelta(object sender, ManipulationDeltaEventArgse) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; transform.TranslateX+= e.DeltaManipulation.Translation.X; transform.TranslateY+= e.DeltaManipulation.Translation.Y; }

  16. Scaling a UI Element // XAML <Rectangle ... Fill="Red" ManipulationDelta="OnManipulationDelta"> <Rectangle.RenderTransform> <ScaleTransform /> </Rectangle.RenderTransform> </Rectangle> // C# private void OnManipulationDelta(object sender, ManipulationDeltaEventArgse) { 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; } }

  17. Inertia • 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

  18. Simulating Horizontal Inertia private void OnManipulationCompleted(object sender, ManipulationCompletedEventArgse) { 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(); } }

  19. Manipulation Events

  20. Gestures • 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

  21. 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

  22. GestureListener Events

  23. Responding to Taps // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerTap="OnTap" /> </toolkit:GestureService.GestureListener> </Rectangle> // C# private void OnTap(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Tap GestureCompleted

  24. Responding to Double Taps // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerDoubleTap="OnDoubleTap" /> </toolkit:GestureService.GestureListener> </Rectangle> // C# private void OnDoubleTap(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Tap GestureCompleted GestureBegin DoubleTap GestureCompleted

  25. Responding to Holds // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerHold="OnHold" /> </toolkit:GestureService.GestureListener> </Rectangle> // C# private void OnHold(object sender, GestureEventArgs e) { (sender as Rectangle).Fill = new SolidColorBrush(Colors.Blue); } GestureBegin Hold GestureCompleted

  26. Moving a UI Element // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerDragDelta="OnDragDelta" /> </toolkit:GestureService.GestureListener> <Rectangle.RenderTransform> <TranslateTransform /> </Rectangle.RenderTransform> </Rectangle> // C# private void OnDragDelta(object sender, DragDeltaGestureEventArgse) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; transform.X += e.HorizontalChange; transform.Y += e.VerticalChange; } GestureBegin DragStarted DragDelta DragDelta ... DragDelta DragDelta DragCompleted GestureCompleted

  27. Responding to Flicks // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerFlick="OnFlick" /> </toolkit:GestureService.GestureListener> <Rectangle.RenderTransform> <TranslateTransform /> </Rectangle.RenderTransform> </Rectangle> // C# private void OnFlick(object sender, FlickEventArgse) { Rectangle rect = sender as Rectangle; TranslateTransform transform = rect.RenderTransform as TranslateTransform; InertiaAnimation.To = transform.X+ e.HorizontalVelocity/ 10.0; InertiaStoryboard.Begin(); } GestureBegin DragStarted DragDelta DragDelta ... Flick DragCompleted GestureCompleted

  28. Scaling a UI Element // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerPinchDelta="OnPinchDelta" /> </toolkit:GestureService.GestureListener> <Rectangle.RenderTransform> <ScaleTransform/> </Rectangle.RenderTransform> </Rectangle> // 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 ... PinchDelta PinchDelta PinchCompleted GestureCompleted

  29. Rotating a UI Element // XAML <Rectangle Width="300" Height="200" Fill="Red"> <toolkit:GestureService.GestureListener> <toolkit:GestureListenerPinchDelta="OnPinchDelta" /> </toolkit:GestureService.GestureListener> <Rectangle.RenderTransform> <RotateTransform/> </Rectangle.RenderTransform> </Rectangle> // 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 ... PinchDelta PinchDelta PinchCompleted GestureCompleted

  30. GestureListener Events

  31. Questions? Charles Petzold www.charlespetzold.com

More Related