How To Zoom An Image In Universal Application Development With XAML And C#

Before reading this article, please go through the following article.

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn how to develop "Zoom an Image" with Scroll Viewer control and image control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, let's discuss step by step app development.

Step 1 - Open Visual studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give suitable Name for your App (UWPScrollZoomIMG) ->OK.

New Project

Step 2 - Choose the target and minimum platform version that your Universal Windows Application will support. After that, the project creates App.xaml and MainPage.xaml.

version

Step 3 - Open (double click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML controls and drag the required control to the middle of design canvas.

After that, drag and drop the Scroll Viewer control. You have to change the name property.

Scroll Bar

Now, change the property for scroll bar control, HorizontalScrollMode.

Image Control

Now, change the property for scroll bar control, HorizontalScrollBarVisibility

Image Control

Step 4 - Next, you can add the Image Control and change the name property.

Image Control

Add an image in Assets folder.

Add an image

Set the image to the Image source property.

 Image source Property

Step 5 - Remove the / in the scroll viewer.

Remove

Add the end tag after the image code and change the size of the scroll bar.

scroll bar

Add TextBlock control and change the name and text property for Title.

TextBlock

Note: Automatically, the following code will be generated in XAML code View while we are done with the design View.

  1. <Page x:Class="UWPScrollZoomIMG.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPScrollZoomIMG" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <ScrollViewer x:Name="SVZoomImg" HorizontalAlignment="Left" Height="357" Margin="10,179,0,0" VerticalAlignment="Top" Width="340" ZoomMode="Enabled" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible">  
  4.             <Image x:Name="image" Height="100" Width="100" Source="Assets/taj-mahal-agra-picture.jpg" /> </ScrollViewer>  
  5.         <TextBlock x:Name="tbTitle" HorizontalAlignment="Left" Margin="66,105,0,0" TextWrapping="Wrap" Text="Scorll bar Zooming Image Demo" VerticalAlignment="Top" Height="35" Width="238" FontWeight="Bold" /> </Grid>  
  6. </Page>  
Step 6 - Deploy your app in Local Machine. The output of the UWPScrollZoomIMG App is shown below.

output

 Zooming the Image is shown.

output

Summary

Now, you have successfully created and tested your "Zoom an Image" with scroll viewer control and image controls in Visual C# - UWP environment.