<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);}}
}