pinch to zoom,drag an image anywhere on the screen in windows phone 8 apps

Question

once again hi everybody., recently i have created face changer application for windows phone 8 devices where i have designed a page with two image control where

1 st image as background and 2 nd image control is foreground.

i have added " GestureListener " to my 1 st image control (background) where i have to "Pinch , Zoom in, zoom out , drag" that background image using "toolkit:GestureService.GestureListener ".

i did everything fine like i can able to pinch , zoom, drag an image successfully... But,

the problem is " I Can't able to Pinch or drag the image from anywhere i touch my finger(s) on the screen"., so that the pinch zoom or drag is much difficult for me to zoom in/out or drag an image .,

But in I-Phone/i-pad/i-pod & all Android devices i can able to pinch to zoom in/out or drag an image from touching anywhere on the screen.,

like already i said my 1 st image is background which can be added gesture control and 2 nd image is normal image control which cant zoom or drag.,

Here is my code.,

my XAML Code :

<Grid x:Name="ContentPanel" Grid.RowSpan="2">
    <Canvas x:Name="screenArea" Width="400" Height="580" >

        <Image x:Name="myImage" Width="400" Height="580"  RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache" >
            <Image.RenderTransform>
                <TransformGroup>
                    <CompositeTransform x:Name="MyMustacheTransformation" />
                </TransformGroup>
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener PinchStarted="OnPinchStarted"
                                         PinchDelta="OnPinchDelta"
                                         DragDelta="OnDragDelta"/>
            </toolkit:GestureService.GestureListener>
        </Image>
        <Image x:Name="frameImage" Width="400" Height="580" Stretch="Fill"/>
    </Canvas>
</Grid>

And my CS code for pinch_start, Drag_delta, pinch_delta are

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    _initialAngle = MyMustacheTransformation.Rotation;
    _initialScale = MyMustacheTransformation.ScaleX;
}

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    MyMustacheTransformation.Rotation = _initialAngle + e.TotalAngleDelta;
    MyMustacheTransformation.ScaleX = _initialScale * e.DistanceRatio;
    MyMustacheTransformation.ScaleY = _initialScale * e.DistanceRatio; 
}

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    Image rect = sender as Image;
    TranslateTransform transform = rect.RenderTransform as TranslateTransform;

    MyMustacheTransformation.TranslateX += e.HorizontalChange;
    MyMustacheTransformation.TranslateY += e.VerticalChange;
}

I Hope you can understand what am asking and sorry if my words are not clear.,

if you ll already used face changer applications on either Android/i-phone/pod/pad devices means they can understand easily what am expecting.,

MY Goal Is :

" i can able to Pinch to Zoom in/out , drag an image from touching anywhere on the layout.. like in i-phone/pod/pad & android devices"

I have struggle with couple of weeks., please give some solutions.,

i you give any sample code means that could more useful for me.,

Thanks in advance guys.,

Answer 1

The problem is that you attached the GestureListener to the image, hence you only get gestures when you touch the image.

Attach the listener to the outermost Grid.