Pinch Gestures in Qt and WP7

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

See Also

• Input, Touch, and Gestures (MSDN)

Article Metadata

---

Code Example

Source file: Media: PinchGesturesWP7.zip

---

Tested with

SDK: Windows Phone SDK 7.1

---

Compatibility

Platform(s): 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)

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: It is impossible to show a pinch gesture effectively in a static image, as above. We suggest you try the example.

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

• The full source code of the example is available here: File:PinchGesturesWP7.zip