Mobile development professionals
Experts in Windows 10 app development & Xamarin development for Android / iOS / Windows. Develop your app once and deploy to multiple platforms & devices. We use leading edge technology to create your apps.

Windows 10 | Microsoft

image
Windows development (.Net)

Android | Google

image
Xamarin Android development

iOS | Apple

image
Xamarin iOS Development
Using leading edge tools & frameworks
Powered by us
A sample of apps developed / powered by GoedWare
MEGA Privacy

MEGA Privacy

Windows Store

Ricoh myPrint

Ricoh myPrint

Windows Store

Aufladen.de

Aufladen.de

Windows Store

TV Films NL

TV Films NL

Windows Store

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!

Comments powered by CComment

Contact us

E-mail: info@goedware.com

Address

v/d Bosstraat 7
v/d Bosstraat 7
4697 GK Sint-Annaland
4697 GK Sint-Annaland
Zeeland, The Netherlands
Zeeland, The Netherlands