Zoom Out Image to fit ScrollViewer Dimensions

Question

I have a little issue with zooming accordingly an image. I have an Image in my XAML, with a ScrollViewer attached so it can be zoomed. Like this :<

Answer 1

You can set the dimensions (Width, Height) of the Image to match the ScrollViewer.ViewportWidth/Height, so that by default all of the image is visible. Then set MinZoomFactor to 1 so that no-one zooms out beyond what makes sense and MaxZoomFactor to something that would make sense.

If you want more control - leave the Image size properties on the default Auto (and VerticalAlignment/HorizontalAlignment different than Stretch), compare aspect ratios of the ScrollViewer (ViewportWidth/ViewportHeight) to the Image (ActualWidth/ActualHeight assuming Image.Stretch="None" and that the Image is actually loaded). If the ScrollViewer aspect ratio is wider - the MinZoomFactor you will want will be ScrollViewer.ViewportHeight / Image.ActualHeight. If the Image aspect ratio is wider - the MinZoomFactor you will want will be ScrollViewer.ViewportWidth / Image.ActualWidth. MaxZoomFactor should be 1 regardless unless you want to zoom to more than screen pixel per image pixel (at 100% scaling of the application).

You might find my blog post interesting:

http://blog.onedevjob.com/2012/07/21/creating-a-zoomable-scrollviewer-with-zoomsnappoints-in-winrt-xaml/