Windows Phone 8.1 development: Touch and Pointer events 1

Source: http://www.bcmeng.com/windows-phone-touch/

Touch events for the UIElement class:

Manipulationstarting: The Manipulationstarting event occurs on an element that has the Ismanipulationenabled property set to True when the user places the finger on it. is raised before the touch operation begins.

Manipulationstarted: Raised after the start of a touch operation.

Manipulationinertiastarting: This event is raised when the touch operation terminates and the inertia motion is started.

Manipulationdelta: This event occurs more than once when the user drags a finger through the screen during the operation and repeats the action when inertia occurs. This event is raised as long as any parameter changes in the touch operation, such as position, angle, and so on.

(Note that there are two very important attributes in Manipulationdelta: Delta and cumulative.) The Delta property refers to all data that occurs when the Manipulationdelta event is currently occurring, and cumulative refers to all data changes that occur from the start of a touch operation. The complete () method of the Manipulationdelta event can terminate the inertia motion)

Manipulationcompleted: This event is raised when the touch operation is complete

(Note: E. OriginalSource can get the object that triggered the touch, e.handled can stop the routed event to continue up, E.position can get the current position coordinates)

About the order in which touch events are raised: (Note: The Manipulationdelta event is raised multiple times)

• Manipulationstarting
• manipulationstarted
• Manipulationdelta
• Manipulationinertiastarting
• Manipulationdelta
• manipulationcompleted

We can do a test with a rectangle to verify the trigger order of the touch events: (Note: You must set the Manipulationmode property, otherwise no touch events will be raised)

<rectangle name= "rect" width= " $″height= -″fill="Yellow" Manipulationmode="All" manipulationcompleted="rect_manipulationcompleted" Manipulationdelta="Rect_manipulationdelta" manipulationinertiastarting="Rect_manipulationinertiastarting" manipulationstarted="rect_manipulationstarted" manipulationstarting="Rect_manipulationstarting" pointercanceled="rect_pointercanceled" pointerentered="rect_pointerentered" PointerExited="rect_pointerexited" PointerMoved="rect_pointermoved" pointerpressed="rect_pointerpressed" pointerreleased="rect_pointerreleased" righttapped="rect_righttapped" Tapped="rect_tapped"></Rectangle>

Background code:

Private voidRect_manipulationcompleted (Objectsender, Manipulationcompletedroutedeventargs e) {Debug.WriteLine ("{0}-manipulationcompleted event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_manipulationdelta (Objectsender, Manipulationdeltaroutedeventargs e) {Debug.WriteLine ("{0}-Manipulationdelta event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_manipulationinertiastarting (Objectsender, Manipulationinertiastartingroutedeventargs e) {Debug.WriteLine ("{0}-manipulationinertiastarting event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_manipulationstarted (Objectsender, Manipulationstartedroutedeventargs e) {Debug.WriteLine ("{0}-manipulationstarted event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_manipulationstarting (Objectsender, Manipulationstartingroutedeventargs e) {Debug.WriteLine ("{0}-manipulationstarting event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointercanceled (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointercanceled event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointerentered (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointerentered event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointerexited (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointerexited event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointermoved (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointermoved event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointerpressed (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointerpressed event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_pointerreleased (Objectsender, Pointerroutedeventargs e) {Debug.WriteLine ("{0}-pointerreleased event occurred ", DateTime.Now.ToString (" h:m:s "));}Private voidRect_righttapped (Objectsender, Righttappedroutedeventargs e) {Debug.WriteLine ("{0}-righttapped Event ", DateTime.Now.ToString (" h:m:s "));//rect. Fill = new SolidColorBrush (colors.blue);}Private voidRect_tapped (Objectsender, Tappedroutedeventargs e) {Debug.WriteLine ("{0}-tapped Event ", DateTime.Now.ToString (" h:m:s "));//rect. Fill = new SolidColorBrush (colors.red);}

When we slide the rectangle, we see that the output is as follows:

 A: +: --pointerentered event occurred A: +: --pointerpressed event occurred A: +: --manipulationstarting event occurred A: +: --pointerexited event occurred A: +: --manipulationstarted event occurred A: +: --Manipulationdelta event occurred A: +: --Manipulationdelta event occurred A: +: --Manipulationdelta event occurred A: +: --manipulationcompleted event occurred A: +: --pointerreleased event occurred

Let's continue with this rectangle to demonstrate an instance of dragging and rotating a rectangle by touch:

First set up a composite transform compositetransform:

Compositetransform cptransform = null;

The Manipulationmode property of the rectangle is then set in the initialization method of the mainpage.

Rect. Manipulationmode = Manipulationmodes.translatex | Manipulationmodes.translatey | Manipulationmodes.rotate;

Then apply the transform to the rectangle:

Cptransform = new Compositetransform ();
Cptransform.translatex = Cptransform.translatey = 0;
cptransform.rotation = 0;
Cptransform.scalex = Cptransform.scaley = 1;
Cptransform.centerx = rect. WIDTH/2;
Cptransform.centery = rect. HEIGHT/2;
Rect. RenderTransform = Cptransform;

Finally, the touch event is handled in the Manipulationdelta event:

Cptransform.translatex + = e.delta.translation.x;
Cptransform.translatey + = E.DELTA.TRANSLATION.Y;
Cptransform.rotation + = e.delta.rotation;

The results are as follows:

Let's show you an example of scaling a photo using touch:

<image width= "″height=" ″name="Image" Source= "1. jpg" Stretch=" Fill "Manipulationdelta="Image_manipulationdelta "manipulationmode=" scale "/>

Background code:

ScaleTransform ScaleTransform; PublicImage () { This. InitializeComponent (); ScaleTransform=NewScaleTransform (); Scaletransform.centerx= Image. Width/2; Scaletransform.centery= Image. Height/2; Scaletransform.scalex= Scaletransform.scaley =1; image. RenderTransform=ScaleTransform;}Private voidImage_manipulationdelta (Objectsender, Manipulationdeltaroutedeventargs e) {Scaletransform.scalex*=E.delta.scale;scaletransform.scaley*=E.delta.scale;}

The results are as follows:

Pointer event let's put it in the next article.

Windows Phone 8.1 development: Touch and Pointer events 1