×
Namespaces

Variants
Actions
Revision as of 08:28, 30 November 2012 by hamishwillee (Talk | contribs)

Pinch Gestures in Qt and Windows Phone

From Nokia Developer 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 withCompatibility
Platform(s): Windows Phone 7.5
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Article
Keywords: Pinch Gestures
Created: somnathbanik (29 Apr 2012)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

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.

Implementation

Qt

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.

WP7

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.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Now we add the Image control in the XAML page

<Image x:Name="ImagePinchZoom"
Source="map.jpg"
Stretch="UniformToFill"
RenderTransformOrigin="0.5,0.5">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
PinchStarted="OnPinchStarted"
PinchDelta="OnPinchDelta"/>
</toolkit:GestureService.GestureListener>
<Image.RenderTransform>
<CompositeTransform
ScaleX="1" ScaleY="1"
TranslateX="0" TranslateY="0"/>
</Image.RenderTransform>
</Image>

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.

Summary

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

Source Code

97 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×