Windows Phone- Touch of Touch (3)

Hello


The screen on the phone is sensitive to touch. To be more specific it is multi touch and can detect at least four fingers simultaneously .

The emulator can mimic touch tap via mouse click.


Touch events

• Low level interface - TouchFrameReported static event, get all touch events in the application
• High level interface - UIElement events :

• ManipulationStarted
• ManipulationDelta  
• ManipulationCompleted

Low Level  Touch Interface

The basic class here is TouchPoint which represent a single touch point.
Touch get properties :

• Action - enumeration of action : Up,Down,Move 
• Position - relative to the upper left corner of a reference element 
• Size - touch area (not usefull)
• TouchDevice

TouchDevice has 2 get properties :

• id - use to destiguish between fingers
• DirectlyOver - top most element underneath the finger

The handler is registered like this :
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

and the handler definition looks like this

 void Touch_FrameReported(object sender, TouchFrameEventArgs e)
        {
             ...
        }

Note that sender is null , why ??

Important methods of TouchFrameEventArgs :

• GetTouchPoints - return a collection of TouchPoints all over the application regardless of the reference element
• GetPrimeryTouchPoint - return the position of the first finger touching the phone

Assignment :
Write an application using TouchFrameReported which displays the X,Y of a touch tap relative to the page and relative to the Application. The Application should have a TextBlock with text Push Me, when ever you click on it its Text is changed to "I Was Pushed" other wise it's "Push Me"

Solution - LowLevelTouch.zip

High Level  Touch Interface


The high level touch interface involves 3 UIElement events :

• ManipulationStarted
• ManipulationDelta  
• ManipulationCompleted

These events translate the fingers activity into translation and scaling. It started with ManipulationStarted event followed by zero or more ManipulationDelta events and end with ManipulationCompleted event.

Source sample
The sample zip file : HighLevelTouch

Following sample demonstrate these 3 events.

I have defined the handler of ManipulationDelta  and ManipulationCompleted on UIElement PhoneApplicationPage :

and the handler for ManipulationStarted is defined for a TextBlock :

so the application issue ManipulationStarted only after tap on tbMessageArea

next i add the handlers 

Run the application to produce:

Click "Push To Start" ,start moving the mouse while it is clicked then release it. You will get all events on the TextBlock :

• one event when you first click the TextBlock
• few events when you moves the clicked mouse
• one event when you released the mouse

Routed Events
Routed event is a mechanism in Silverlight which involves event,bubble and visual tree.

In particular ManipulationStarted,ManipulationDelta ,ManipulationCompleted are routed events.

This means that tapping on the TextBlock in the previous sample cause ManipulationStarted event on this element. However, this event bubble up the visual tree to the parent of the TextBlock i.e. ContentPanel Grid and further to it's father LayoutRoot, and further to it's father phoneApplicationPage. Thus all of these elements could have defined a handler for ManipulationStarted and handle also this event.

Note that e.g. ManipulationStartedEventArgs derive from RoutedEventArgs.

RoutedEventArgs important properties :

• OriginalSource - This is the element that raised the event

You can put Handled property to true to mark the event as handled. In general (except for AddHandler) this will eliminate the bubbling of the event up the visual tree.

Nathan