Gestures and Responding to Interaction Windows 8 Gestures, Gesture Types, Using Pointers and Manipulation events George Georgiev Telerik Corporation www.telerik.com Technical Trainer itgeorge.net
Feb 24, 2016
Gestures and Responding to
InteractionWindows 8 Gestures, Gesture Types,
Using Pointers and Manipulation events
George Georgiev
Telerik Corporationwww.telerik.com
Technical Traineritgeorge.net
Table of Contents
2
Gestures in Windows 8 Static Gestures Manipulations
Responding to Static Gestures WinRT Pointers
Pointers overview Handling Pointer events
WinRT Manipulation events
Interactions in Windows 8Tapping, Holding, Swiping, Sliding,
Rotating, etc.
Interactions in Windows 8
Windows 8 is built around touch interactions Defines a list of standard
interactions Direct input from the user, instead
of controls Three types of interaction events
Gesture events – static single touch interactions
Pointer events – single touch/pen/cursor
Manipulation events – multi-touch interactions
4
Basic Windows 8 Interactions
Name Type DescriptionTap Static gesture One finger touches the screen and
lifts up.Press and hold
Static gesture One finger touches the screen and stays in place.
Double-Tap Static gesture One finger touches the screen twice in a short time interval
Slide Manipulation gesture
One or more fingers touch the screen and move in the same direction.
Swipe Manipulation gesture
One or more fingers touch the screen and move a short distance in the same direction.
Turn Manipulation gesture
Two or more fingers touch the screen and move in a clockwise or counter-clockwise arc.
Pinch Manipulation gesture
Two or more fingers touch the screen and move closer together.
Stretch Manipulation gesture
Two or more fingers touch the screen and move farther apart.
5
Interactions in Windows 8
Some interactions are available only on some devices E.g. you can't "pinch" with a mouse
App must provide alternative interaction methods for different input devices
Input devices Finger(s) Mouse Pen/stylus 6
Interactions in Windows 8
Interactions/gestures should be fluid UI respond with appropriate
"energy" Interactions provide visual feedback Interaction animations "connect"
7
Responding to Static Gestures
Tap, Double-Tap, Tap and Hold
Responding to Static Gestures
WinRT supports events for static gestures Tapped DoubleTapped Holding
Most static gestures work with both mouse and touch input Except Holding – works only on
touch9
Responding to Static Gestures
Can attach event handlers in C# or directly on XAML controls:
Handlers receive event arguments OriginalSource and
PointerDeviceType10
<TextBlock Tapped="TextBlockTapped"> Tap me</TextBlock><TextBlock DoubleTapped="TextBlockDoubleTapped"> Double-Tap me</TextBlock><TextBlock Holding="extBlockHolding"> Hold me</TextBlock>
Responding to Static Gestures
Live Demo
WinRT PointersDevice-independent input
WinRT Pointers Pointers - base of all user input interactions Represent a single abstract device
interaction Common events for press, release,
move, etc. Abstract "contact" detection
Pointer interaction A pointer represents a single
interaction Pointer created on start and
destroyed on end Multiple devices interact ->
multiple pointers created
13
WinRT Pointers Pointers events
PointerMoved PointerCanceled PointerPressed PointerReleased PointerExited PointerEntered PointerCaptureL
ost PointerWheelCha
nged14
Event args provide Current point Intermediate
points All Static
gesture event properties
WinRT Pointers Pointers enable low-level gesture processing Access to each input device contact
position Can build custom gestures Can customize reaction to existing
gestures All gesture processing up to
developer
15
Using WinRT PointersLive Demo
WinRT Manipulation Events
High-level Device-abstract Interactions
WinRT Manipulation Events
Manipulations Continuous interactions Take immediate effect on UI
element Single or Multi-touch
WinRT Manipulations – high-level manipulations detection Provide various info on
manipulation over an element – position, velocity, rotation, etc.
Fire events on interaction start, during interaction, end
18
WinRT Manipulation Events
Manipulation speed and inertia Users can interact fast or slow UI should respond accordingly WinRT Manipulation events support
this Detect interaction "velocity" "inertia start" – pointer released
while moving Manipulation mode
Which interactions a UI element should detect
Default is "None"
19
WinRT Manipulation Events
Events ManipulationStarting ManipulationStarted ManipulationDelta ManipulationCompleted ManipulationInertiaStarting
20
WinRT Manipulation EventsLive Demo
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET
курсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиранеC# курс, програмиране, безплатно
?? ? ?
??? ?
?
? ?
??
?
?
? ?
Questions?
?
Gestures and Responding to
Interactions
http://academy.telerik.com
Exercises Implement PaintRT:
Description on the next slide…
Exercises A simplified version of Paint for Windows RT Can draw lines, circles and squares Colors are picked from the circle, by rotating it – the
color on top (marked by the white strip) is the current color. Hint: place them in a Canvas element and rotate the canvas
The current figure is picked from the 3 options above by sliding them left or right. The figure above the white strip is the current figure
The picture is drawn on the canvas to the left (that red thing with blue eyes is a drawing made with PaintRT)
Tapping on the canvas should draw the current figure with the current color
Double-Tapping a figure on the canvas should change it's color, by cycling through the available ones (red, black, blue, green)
* Bonus (not obligatory) implement rotating, scaling and moving drawn figures
24