Scaling An Image Using UWP 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

The scale animation behavior allows you to change a control’s scale by increasing or decreasing the control through animation. For example, perhaps you want an entry field to change size when the user taps it.

Reading this article, you can learn how to scale an image in UWP 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, we can discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Select Universal (under Visual C# -> Windows) -> Blank App -> give a suitable name for your app (UWPScaleImg) -> OK.

 After choosing the Target and Minimum platform version that your application will support, the Project creates App.xaml and MainPage.xaml.



Step 2

Open the file MainPage.xaml in Solution Explorer and add the Microsoft.Toolkit.Uwp.UI.Animations reference in the project. For adding Reference, right click your project (UWPScaleImg) and select "Manage NuGet Packages".



Choose "Browse" and search Microsoft.Toolkit.Uwp.UI.Animations.

Select the package and install it.



Accept the licence.



Reference is added in your project.



Step 3

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



Step 4

Add images in the Assets folder.



Step 5

Add the image control for displaying the image for scaling.



Step 6

Add the following Xaml namespaces and code for Scaling in Mainpage.xaml.

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"

xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

<interactivity:Interaction.Behaviors>
<behaviors:Scale x:Name="Scale"/>
</interactivity:Interaction.Behaviors>

Add DoubleTapped event method for Image Control. When double tapped, the image scale action will perform.



Note - Automatically, the following code will be generated in XAML code view, when we are done in the design view.

<Page x:Class="UWPScaleImg.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPScaleImg" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns:core="using:Microsoft.Xaml.Interactions.Core" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="215,34,0,0" TextWrapping="Wrap" Text="Scaling Image Test" VerticalAlignment="Top" FontWeight="Bold" FontSize="22" />
        <Image x:Name="imgScale" HorizontalAlignment="Left" Height="69" Margin="215,177,0,0" VerticalAlignment="Top" Width="123" Source="Assets/1.jpg" DoubleTapped="imgScale_DoubleTapped" ToolTipService.ToolTip="Double Tap the Image for Scaling">
            <interactivity:Interaction.Behaviors>
                <behaviors:Scale x:Name="Scale" />
            </interactivity:Interaction.Behaviors>
        </Image>
    </Grid>
</Page>

Step 7

Add namespace and the following code in MainPage.xaml.cs using Microsoft.Toolkit.Uwp.UI.Animations.

private async void imgScale_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
   await imgScale.Scale(duration: 10, delay: 0, centerX: 188f, centerY: 59f, scaleX: 2.0f, scaleY: 2.5f).StartAsync();
}

Step 8

Deploy your app in Local Machine. The output of the UWPScaleImg app is shown below.



After double tapping the image.



Summary

Now, you have successfully tested UWP ToolKit – Scaling your image, in Visual C# - UWP environment.