Pinch Gestures in Qt and WP7

Comments

Hamishwillee - I'm not sure this approach really works

The point of showing how to do the same thing in Qt and Windows phone is to help people migrate. If you have them in separate articles then this isn't really an article on porting any more.

Even if they are in the same article, we need a proper comparison still. By proper comparison, I don't mean just showing code examples as most of these do (although that is part of the story). What really helps people is understanding the fundamental differences and similarities between APIs. What is a Gesture on Qt vs WP? Is it handled as a callback or some other mechanism? Are there any limits to what the gesture can be applied to? Can we apply it to any element. Is it a child of the element its applied to or a sibling. If you can capture this sort of stuff it helps people who already understand one framework understand the logic of the other.

As it is now, I think we've be better simply making it about WP. Then we link to the Qt article in SeeAlso. Lastly, we have one big article which shows the mapping between our Qt and WP articles that show how to do the same thing.

What do you think?

hamishwillee 09:43, 1 May 2012 (EEST)

Somnathbanik - My approach

HI Hamish, Thank you for pointing this out. Actually I was bit confuse with this, I was ready with the Qt code to be put in this article , but found a similar article is already present, so though might be a duplicate one. So didn't add any Qt code and just refer to the existing Qt article. But I will work on these points in near future.

Thanks

Somnath

somnathbanik 08:44, 2 May 2012 (EEST)

Log in or Join to leave comments.

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