Gestures and Responding to Interaction

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