How to zoom in and zoom out Images in WP7?

Question

I have made an application which displays Images .Now I want to implement zoom in and zoom out feature(by using two fingertip's) as in native windows phone photo viewer application.Any idea on how to proceed .

Thanks in Advance.

Answer 1

if you want simple image viewer that supports multi-touch, I recommend you to use WebBrowser control to display image.

It supports multi-touch zoom and smooth scrolling as well by default. But you must have to copy file to isolated storage from project folder. Here's how I've done:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <phone:WebBrowser 
        Name="MyWebBrowserControl"
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" />
</Grid>

---

IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();

        // if image file does not exist in isolated storage, copy it to there~!
        if (!isf.FileExists(filename))
        {
            StreamResourceInfo sr = Application.GetResourceStream(new Uri(filename, UriKind.Relative));
            using (BinaryReader br = new BinaryReader(sr.Stream))
            {
                byte[] data = br.ReadBytes((int)sr.Stream.Length);

                using (BinaryWriter bw = new BinaryWriter(isf.OpenFile(filename, FileMode.OpenOrCreate)))
                {
                    bw.Write(data);
                    bw.Close();
                }

                br.Close();
            }
        }

        Dispatcher.BeginInvoke(() => { MyWebBrowserControl.Navigate(new Uri(filename, UriKind.Relative)); });

※ You must set the Build Action of image file to Content

Answer 2

Check out Laurent Bugnion's multitouch sample - http://multitouch.codeplex.com/

Answer 3

Perhaps the most expedient approach would be to include the Silverlight for Windows Phone Toolkit. This contains a GestureService that will help with pinch and rotate touch gestures. You could apply it to an image like this:-

 <Image Source="someSourceUrl" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
     <Image.RenderTransform>
         <CompositeTransform x:Name="transform" />
     </Image.RenderTransform>
     <toolkit:GestureService.GestureListener>
         <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
     </toolkit:GestureService.GestureListener>
 </Image>

Then in code-behind:-

    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    {
        initialAngle = transform.Rotation;
        initialScale = transform.ScaleX;
    }

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