Scaling In 2-D Transformation Using Windows Store Apps

Introduction

Sometimes it is necessary to perform 2-D transformation operations on an object. The possible 2-D Transformation operations include Scaling, Rotation, Skewing and Transformation. Transformation means that the object is to be transformed from one place to another in other words the location is changed. Rotation means that an object is rotated by an angle, or an axis (x, y or z). Scaling changes the shape of an object in any axis (X, Y and Z). Skewing changes the size of any object in any axis. Since in this article I am only explaining 2-D transformations, the operations are performed only to the X and Y axes.

In this article I will explain one of the four operations of 2-D Transformations, that is "Scaling" that applies to any object (in this the object is an image) to change the shape of the image. For this I use the Render transform property of the image and the composite transform property as:

<Image Source="Red_Rose.jpg" Grid.Row="3" Grid.Column="1" Margin="70,91,-197,-236" >

      <Image.RenderTransform>

          <CompositeTransform x:Name="Scaling"/>

      </Image.RenderTransform>

</Image>

In this the Scaling in the composite transform is the name of the operation that I perform; this will be passed at the time of binding of the control that performs scaling in an image. The control that I take for binding is the Slider control, so that when I change the value of the slider control the shape of the image will be changed, as:

<Slider Name="ScaleX" Grid.Row="1" Grid.Column="1" Margin="10,0,0,0" Width="200" StepFrequency="0.1" Minimum="0" SmallChange="0.01" LargeChange="0.05" Maximum="2" Value="{Binding ElementName=Scaling, Path=ScaleX, Mode=TwoWay}"/>

The complete code that will be written in your MainPage.xaml file inside your Windows Store apps is:

<Page

    x:Class="Scaling.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Scaling"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="150"/>

            <ColumnDefinition Width="200"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="Scaling In 2-D Transformation" FontSize="30" Margin="10,10,-300,0" Grid.Row="0" Grid.Column="1"/>

        <TextBlock Text="ScaleX" Grid.Row="1" Grid.Column="0" Margin="10,10,0,0" FontSize="20"/>

        <Slider Name="ScaleX" Grid.Row="1" Grid.Column="1" Margin="10,0,0,0" Width="200" StepFrequency="0.1" Minimum="0" SmallChange="0.01" LargeChange="0.05" Maximum="2" Value="{Binding ElementName=Scaling, Path=ScaleX, Mode=TwoWay}"/>

        <TextBlock Text="ScaleY" Grid.Row="2" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <Slider Name="ScaleY" Grid.Row="2" Grid.Column="1" Margin="10,0,0,0" Width="200" StepFrequency="0.1" Minimum="0" SmallChange="0.01" LargeChange="0.05" Maximum="2" Value="{Binding ElementName=Scaling, Path=ScaleY, Mode=TwoWay}"/>

        <Image Source="Red_Rose.jpg" Opacity="0.3" Grid.Row="3" Grid.Column="1" Margin="70,91,-197,-236" />

        <Image Source="Red_Rose.jpg" Grid.Row="3" Grid.Column="1" Margin="70,91,-197,-236" >

            <Image.RenderTransform>

                <CompositeTransform x:Name="Scaling"/>

            </Image.RenderTransform>

        </Image>

    </Grid>

</Page>

Now run your application; you will see the output like:



Change the shape of the image or perform scaling in the X axis as:

Change the shape of the image or perform scaling in the Y axis as:

Perform scaling in both the X and Y axes by changing some values in both the sliders as:



Summary

In this article I explained how to perform scaling in Windows Store apps.