1 / 31

Make great touch apps using XAML

APP-503T. Make great touch apps using XAML. Alnur Ismail Program Manager Microsoft Corporation. Agenda. Using built-in controls for great touch apps out of the box Customizing panning and zooming Using the touch API for advanced touch interaction Recap

ciara
Download Presentation

Make great touch apps using XAML

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. APP-503T Make great touch apps using XAML Alnur Ismail Program Manager Microsoft Corporation

  2. Agenda • Using built-in controls for great touch apps out of the box • Customizing panning and zooming • Using the touch API for advanced touch interaction • Recap You’ll leave with examples of how to • Quickly create touch enabled apps • Easily build advanced touch apps

  3. demo Memories app

  4. Using built-in controls for great touch apps out-of-the-box

  5. Controls that support the touch language • ListView/GridView • Swipe • Panning • Tap • FlipView • Panning ListView GridView FlipView

  6. Controls that support the touch language • ScrollViewer • Panning • Optical zoom Optical zoom

  7. Controls that support the touch language • JumpViewer • Semantic zoom

  8. Customizing panning and zooming

  9. demo Custom panning and zooming using ScrollViewer

  10. Enabling snap-points • <ScrollViewer • > • <StackPanel> • <Image Source="..."Height="533"Width="800"/> • <Image Source="..." Height="533" Width="800"/> • <Image Source="..." Height="533" Width="800"/> • ... • </StackPanel> • </ScrollViewer> VerticalSnapPointsType="Mandatory" VerticalSnapPointsAlignment="Near"

  11. Enabling rails • <ScrollViewer • > • <TextBlock> • <!-- content --> • </TextBlock> • </ScrollViewer> HorizontalScrollMode="Rails" VerticalScrollMode="Rails"

  12. Customizing zooming • //Setting min/max zoom factor • svContent.MinZoomFactor= .5f; • svContent.MaxZoomFactor = 8; • //Adding zoom snap-points • svContent.ZoomSnapPoints.Add(.5f); • svContent.ZoomSnapPoints.Add(1); • svContent.ZoomSnapPoints.Add(4); • svContent.ZoomSnapPoints.Add(8); 

  13. Using the touch API for advanced touch interaction

  14. Gesture API • Properties • IsTapEnabled • IsHoldingEnabled • IsRightTapEnabled • Events • Tapped • Holding • RightTapped

  15. Holding • privatevoid Holding(object sender, HoldingEventArgs e) • { • switch (e.HoldingState) • { • caseHoldingState.Started: • { • //perform action • }; • caseHoldingState.Canceled: • { • //undo action • }; • caseHoldingState.Completed: • { • //commit action • }; • } • }

  16. demo Scale, translate & rotate content

  17. Manipulation API • Properties • ManipulationModes • Events • ManipulationStarting • ManipulationStarted • ManipulationDelta • ManipulationCompleted • ManipulationInertiaStarting

  18. demo Walkthrough rotating content

  19. demo Painting

  20. Pointer API • PointerDevice • Pointer • PointerPoint • Properties • PointerCaptures • Events • PointerPressed • PointerReleased • PointerMoved • PointerEntered • PointerExited • PointerCanceled • PointerCaptureLost • PointerWheelChanged

  21. Painting with pointers • <Image • PointerPressed="PointerPressed"PointerReleased="PointerReleased"PointerMoved="PointerMoved" • /> PointerCanceled="PointerReleased"

  22. Painting with pointers • privatevoidPointerMoved(object sender, PointerEventArgs e) • { • PointerPointpt = e.GetCurrentPoint(LayoutRoot); • ... • Linel = newLine() • { • ... • X2 = pt.Position.X, • Y2 = pt.Position.Y, • StrokeThickness= pt.Properties.Pressure, • }; • ... • }

  23. Tips & tricks • Panning/zooming vs. translation/scaling • Independent thread vs. UI thread • ScrollViewer and manipulation APIs • Reactive/proactive events • Click vs. tap

  24. Recap

  25. How XAML makes Windows 8 touch easy • Quickly build touch apps using XAML controls which support common touch scenarios out-of-the-box • Easy to access powerful touch APIs that enable advanced scenarios in a familiar way • Code for touch, mouse and pen in a unified way • Low barrier to entry by using existing knowledge plus a few new concepts

  26. Use Windows 8 touch capabilities + XAML to create great touch apps!And please provide feedback.

  27. Related sessions • [APP-517T] Build polished collection and list apps using XAML • [APP-914T] The lifetime of XAML text: from input to display through printing

  28. Further reading and documentation • Look at SDK samples for similar examples + code • Twitter: @alnurismail

  29. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  30. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related