Constraints on Image Width/Height on WP7 GestureListener

Question

I added the GestureListener to an image i'm trying to have zoom like this Stack Overflow answer here: How to zoom in and zoom out Images in WP7?

The problem is that the image does not ever stop zooming, and covers other controls on the page. This covers a few important buttons on the page.

In addition, it allows the image to get so small that it's very hard to make it bigger, and allows the image to go so far off the screen where it's too hard to bring it back.

My goal is to: Keep the image in the Grid Row it's assigned to, to not cover other controls. Prevent the width/height of the image from getting to small Prevent the Width/height of getting too big Prevent the image from being dragged off the screen.

Is there a way to solve this? The Width/Height of the Image object are not modified by the GestureListener, so I cannot simply do

Image i = sender as Image;
if (i.Height == TOO_BIG)
return;
...

Answer 1

This blog post shows how to implement Pinch/Zoom scaling on an image: http://alvaropeon.wordpress.com/2011/03/10/implementing-pinch-to-zoom-images-in-wp7/ The solution presented there is to limit at 4x the original size, but you could whatever you want. If you want to constrain it to it's parent, then just get the ActualWidth and ActualHeight of the parent as use those as your limits.

Answer 2

I ended up fixing this and getting it work perfectly with the code from the following blog:

http://www.frenk.com/2011/03/windows-phone-7-correct-pinch-zoom-in-silverlight/

It's a very impressive set of functions for Pinch/Zoom. The issue I had about the image covering other controls was fixed by adding clipping to the Grid, which is detailed here:

http://www.codeproject.com/Articles/36495/Silverlight-ClipToBounds-Can-I-Clip-It-Yes-You-Can.aspx

Answer 3

I guess you can do it by restricting transform.ScaleX and transform.ScaleY in the below event handler.if initialScale < somelength ,then only do the code.

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        transform.Rotation = initialAngle + e.TotalAngleDelta;
        transform.ScaleX = initialScale * e.DistanceRatio;
        transform.ScaleY = initialScale * e.DistanceRatio;
    }