<ViewportControl x:Name="viewport" DoubleTap="OnDoubleTap"
        ManipulationStarted="OnManipulationStarted" ManipulationDelta="OnManipulationDelta" 
                     ManipulationCompleted="OnManipulationCompleted" ViewportChanged="viewport_ViewportChanged">
    <Canvas x:Name="canvas">
        <Image x:Name="image" 
                    RenderTransformOrigin="0,0" CacheMode="BitmapCache"
                   ImageOpened="OnImageOpened">
            <Image.RenderTransform>
                <ScaleTransform x:Name="xform"/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</ViewportControl>

namespace ImageExtend
{
    public partial class ZoomImage : UserControl
    {
        public static readonly DependencyProperty SourceProperty
            = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ZoomImage), new PropertyMetadata(OnImageSourceChanged));
        private static void OnImageSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d != null && d is ZoomImage)
            {
                (d as ZoomImage).SetImage((ImageSource)e.NewValue);
            }
        }
        public ImageSource Source
        {
            get
            {
                return (ImageSource)GetValue(SourceProperty);
            }
            set
            {
                SetValue(SourceProperty, value);
            }
        }
 
        const double MaxScale = 10;
 
        double _scale = 1.0;
        double _minScale;
        double _coercedScale;
        double _originalScale;
 
        Size _viewportSize;
        bool _pinching;
        Point _screenMidpoint;
        Point _relativeMidpoint;
 
        BitmapImage _bitmap;
 
 
        public ZoomImage()
        {
            InitializeComponent();
            this.Loaded += ZoomImage_Loaded;
        }
 
        void ZoomImage_Loaded(object sender, RoutedEventArgs e)
        {
            if (Source != null)
            {
                SetImage(Source);
            }
        }
 
        void SetImage(ImageSource img)
        {
            image.Source = img;
        }
 
        /// <summary> 
        /// Either the user has manipulated the image or the size of the viewport has changed. We only 
        /// care about the size. 
        /// </summary> 
        void viewport_ViewportChanged(object sender, System.Windows.Controls.Primitives.ViewportChangedEventArgs e)
        {
            Size newSize = new Size(viewport.Viewport.Width, viewport.Viewport.Height);
            if (newSize != _viewportSize)
            {
                _viewportSize = newSize;
                CoerceScale(true);
                ResizeImage(false);
            }
        }
 
        /// <summary> 
        /// Handler for the ManipulationStarted event. Set initial state in case 
        /// it becomes a pinch later. 
        /// </summary> 
        void OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            _pinching = false;
            _originalScale = _scale;
        }
 
        /// <summary> 
        /// Handler for the ManipulationDelta event. It may or may not be a pinch. If it is not a  
        /// pinch, the ViewportControl will take care of it. 
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            if (e.PinchManipulation != null)
            {
                e.Handled = true;
 
                if (!_pinching)
                {
                    _pinching = true;
                    Point center = e.PinchManipulation.Original.Center;
                    _relativeMidpoint = new Point(center.X / image.ActualWidth, center.Y / image.ActualHeight);
 
                    var xform = image.TransformToVisual(viewport);
                    _screenMidpoint = xform.Transform(center);
                }
 
                _scale = _originalScale * e.PinchManipulation.CumulativeScale;
 
                CoerceScale(false);
                ResizeImage(false);
            }
            else if (_pinching)
            {
                _pinching = false;
                _originalScale = _scale = _coercedScale;
            }
        }
 
        /// <summary> 
        /// The manipulation has completed (no touch points anymore) so reset state. 
        /// </summary> 
        void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            _pinching = false;
            _scale = _coercedScale;
        }
 
 
        /// <summary> 
        /// When a new image is opened, set its initial scale. 
        /// </summary> 
        void OnImageOpened(object sender, RoutedEventArgs e)
        {
            _bitmap = (BitmapImage)image.Source;
 
            // Set scale to the minimum, and then save it. 
            _scale = 0;
            CoerceScale(true);
            _scale = _coercedScale;
 
            ResizeImage(true);
        }
 
        /// <summary> 
        /// Adjust the size of the image according to the coerced scale factor. Optionally 
        /// center the image, otherwise, try to keep the original midpoint of the pinch 
        /// in the same spot on the screen regardless of the scale. 
        /// </summary> 
        /// <param name="center"></param> 
        void ResizeImage(bool center)
        {
            if (_coercedScale != 0 && _bitmap != null)
            {
                double newWidth = canvas.Width = Math.Round(_bitmap.PixelWidth * _coercedScale);
                double newHeight = canvas.Height = Math.Round(_bitmap.PixelHeight * _coercedScale);
 
                xform.ScaleX = xform.ScaleY = _coercedScale;
 
                viewport.Bounds = new Rect(0, 0, newWidth, newHeight);
 
                if (center)
                {
                    viewport.SetViewportOrigin(
                        new Point(
                            Math.Round((newWidth - viewport.ActualWidth) / 2),
                            Math.Round((newHeight - viewport.ActualHeight) / 2)
                            ));
                }
                else
                {
                    Point newImgMid = new Point(newWidth * _relativeMidpoint.X, newHeight * _relativeMidpoint.Y);
                    Point origin = new Point(newImgMid.X - _screenMidpoint.X, newImgMid.Y - _screenMidpoint.Y);
                    viewport.SetViewportOrigin(origin);
                }
            }
        }
 
        /// <summary> 
        /// Coerce the scale into being within the proper range. Optionally compute the constraints  
        /// on the scale so that it will always fill the entire screen and will never get too big  
        /// to be contained in a hardware surface. 
        /// </summary> 
        /// <param name="recompute">Will recompute the min max scale if true.</param> 
        void CoerceScale(bool recompute)
        {
            if (recompute && _bitmap != null && viewport != null)
            {
                // Calculate the minimum scale to fit the viewport 
                double minX = viewport.ActualWidth / _bitmap.PixelWidth;
                double minY = viewport.ActualHeight / _bitmap.PixelHeight;
 
                _minScale = Math.Min(minX, minY);
            }
 
            _coercedScale = Math.Min(MaxScale, Math.Max(_scale, _minScale));
 
        }
 
        private void OnDoubleTap(object sender, GestureEventArgs e)
        {
            e.Handled = true;
 
            _scale = 0;
            CoerceScale(true);
            _scale = _coercedScale;
 
            ResizeImage(true);
        }
    }
}