implementing zoom on an image wp7

Question

I am trying to enable zoom capabilities on an image in my wp7 app using either tap or pinch like other app features,ie,map. Most of the posts i've seen relating to this are a it old and am wondering if there is a more recent way to achieve this??

score 4 · Answer 1 · answered Apr 25 '12 at 18:12

don't know if there is something better, but here is what I'm doing:

<Image Name="displayImage" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{Binding photo_link}" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
      <Image.RenderTransform>
            <CompositeTransform x:Name="transform" />
      </Image.RenderTransform>
      <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" />
      </toolkit:GestureService.GestureListener>
 </Image>



    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    {
        var image = sender as System.Windows.Controls.Image;
        if (image == null) return;
        var transform = image.RenderTransform as CompositeTransform;
        if (transform == null) return;
        initialScale = transform.ScaleX;
    }

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        var image = sender as System.Windows.Controls.Image;
        if (image == null) return;
        var transform = image.RenderTransform as CompositeTransform;
        if (transform == null) return;

        transform.ScaleX = initialScale * e.DistanceRatio;
        transform.ScaleY = initialScale * e.DistanceRatio;
    }

You can also keep track of the original scale if you want to do a quick double-tap or something to reset the size.

thanks, perfect for zoom...Is there a possibility to pan across the image after zooming? — mhSligo, Apr 25 '12 at 19:22
was going to add the DragDelta event, but I see someone beat me to it. Use that for the panning, of course, and don't forget to add it to your GestureListener in xaml. — earthling, Apr 26 '12 at 20:11

Hermit Dave · Accepted Answer · 2012-04-25T21:44:24.930

3

You need to use scale transform.. I can do a blogpost later on if you are interested.for pinch zoom drag flick etc you need to use gesture service from toolkit

private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
    {
        scaleTrans.CenterX = (scaleTrans.CenterX - e.HorizontalChange);
        scaleTrans.CenterY = (scaleTrans.CenterY - e.VerticalChange);

        if (scaleTrans.CenterX < 0)
            scaleTrans.CenterX = 0;
        else if (scaleTrans.CenterX > (imgViewer.Height * scaleTrans.ScaleX))
            scaleTrans.CenterX = imgViewer.Height * scaleTrans.ScaleX;

        if(scaleTrans.CenterY < 0)
            scaleTrans.CenterY = 0;
        else if (scaleTrans.CenterY > (imgViewer.Height * scaleTrans.ScaleY))
            scaleTrans.CenterY = imgViewer.Height * scaleTrans.ScaleY;
    }

edited Apr 25 '12 at 21:44

answered Apr 25 '12 at 18:12

Hermit Dave

3,036
1
13
13

1

Does this allow user to zoom and then move across zoomed image? – mhSligo Apr 25 '12 at 19:29
1

yes i have implemented pinch zoom, drag, flick etc. here's code for pan / drag – Hermit Dave Apr 25 '12 at 21:42
Ok and I just add something like `DragDelta="OnDragDelta"` in my xaml? – mhSligo Apr 26 '12 at 12:02
1

Yes in GestureListener xaml declaration, add DrageDelta="method" – Hermit Dave Apr 26 '12 at 13:29

implementing zoom on an image wp7

2 Answers2