Pinch & Zoom

Intro

Welcome to our first blog article about app development. In this and future blogs we will try to provide you with tips, code snippets and tricks for developing Universal Windows Platform (UWP) or Xamarin apps. Sometimes we also run into a problem where the solution is not so easy to search and find on the internet/Google. That is why we also will try to write down any work-around or solution we have found in these blogs to help you find a code snippet more quickly.

Pinch to zoom

This first blog will help you add pinch and zoom to an Image Control in an UWP application. 

You all know the functionality of your default Photo app in Windows 10 (mobile) where you pinch to zoom the picture with two of your fingers. This is a nice feature you want to have in your own app when working with images too. But the default Image control in the Windows 10 development kit does not have that kind of functionality out of box. You need to implement it yourself. You can do that by custom coding those features by subscribing to several events of the Image Control or by using this neat tip to make it a little bit more easy.

ScrollViewer

The important part of this solution is to use the default ScrollViewer Control as parent for your Image Control. It will provide you with the needed gestures implementations without writing any extra custom code. You need to nest the Image Control inside the ScrollViewer and set some properties to the correct values to make it work.

First you need to set the ZoomMode of the ScrollViewer Control to "Enabled". This will allow you to zoom in and out the Image. You can provide a MinZoomFactor and a MaxZoomFactor if you want to control the minimum and maximum zoom of the loaded image.

Image

After setting these values the app will already allow you to zoom the image, but the image will be distorted on load, stretched and/or snaps to a certain area when you try to scroll around the image. That is why we need an extra set of property changes to make the combination ScrollViewer >> Image work as expected. And these properties will need to be set on the nested Image Control.

We need to bind the MaxWidth & MaxHeight of the Image to the Viewport properties of the ScrollViewer to load the image in the correct aspect ratio and to disable any snapping to unwanted areas, but still keeping our zoom functionality. We do that by giving the ScrollViewer a name and bind it by it's name to the Image Control by using the ElementName binding property in XAML and specifying a Path to bind it's Viewport height and width.

Code example

After we have set all these properties, your XAML should look like the code below. We use our Images in this example inside a FlipView to also allow the user to flip/scroll a set of pictures.

<FlipView>
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer
Name="ScrollViewerMain" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
MinZoomFactor="1" ZoomMode="Enabled">
<Image
MaxWidth="{Binding Path=ViewportWidth, ElementName=ScrollViewerMain}" MaxHeight="{Binding Path=ViewportHeight, ElementName=ScrollViewerMain}" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding Path}"/> </ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>

Now build and run your app to pinch & zoom your images!