Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Pinch Gestures in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to handle pinch gestures in Qt and WP7.

See Also
WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Keywords: Pinch Gestures
Created: somnathbanik (29 Apr 2012)
Last edited: hamishwillee (16 Jul 2013)



This code example implements support for pinch gestures using the QML PinchArea Element on Qt the Silverlight Toolkit’s GestureService on Windows Phone.

Pinch Gestures in WP7

Note.pngNote: It is impossible to show a pinch gesture effectively in a static image, as above. We suggest you try the example.



We already have the article How to handle pinch gestures using PinchArea item which shows how to handle pinch gestures using the QML PinchArea Element.


First create an empty Windows Phone project. We need to download and install the Silverlight Toolkit, then add the reference Microsoft.Phone.Controls.Toolkit to the project. Next add the namespace in the XAML page.


Now we add the Image control in the XAML page

<Image x:Name="ImagePinchZoom"
ScaleX="1" ScaleY="1"
TranslateX="0" TranslateY="0"/>

Then we add the GestureService.GestureListener to the Image control to handle gestures on it. We also add transformation to the Image. The GestureListener provides an easy way to detect touch gestures in our application. PinchStarted and PinchDelta events can be used together to detect if a user is performing any pinching operation, like zoom in or zoom out. On pinch start the OnPinchStarted() event handler is called and to detect any two-touch point operation OnPinchDelta() event handler is used.

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
Scale = ((CompositeTransform)ImagePinchZoom.RenderTransform).ScaleX;
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
var transform = (CompositeTransform)ImagePinchZoom.RenderTransform;
transform.ScaleX = Scale * e.DistanceRatio;
transform.ScaleY = transform.ScaleX;

In OnPinchStarted() event handler we get the initial scale of the Image transformation. And in OnPinchDelta() we update the X and Y scale of the Image transformation.


This is a very basic way of gestures implementation in WP7. To know more about WP7 gestures please visit MSDN.

Source Code

This page was last modified on 16 July 2013, at 07:27.
81 page views in the last 30 days.