×
Namespaces

Variants
Actions

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 with
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
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 (16 Jul 2013)

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

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