Rotation and Translation In 2-D Transformation Using Windows Store Apps

Introduction

Today I am going to explain the Rotation and Translation operations of 2-D Transformations in Windows Store apps. In 2-D Transformations, rotation means to rotate an object by a certain degree. In other words suppose an object (image) is rotated and various degrees are applied like (30, 60, 90) etc. so we can say that the image is rotated 30 degrees. For this I use the slider control for which the value (degrees) changes. Also when we change the value of the slider then the image is correspondingly rotated in various degrees according to the value of the slider.

On the other hand the Translate function of 2-D Transformation can translate the image in X-axis and the Y-axis, which means changes the location of the image in x-axis and the y-axis. For changing the axis I again use the slider control for the translate operation. Now to see how it works let's see the following steps.

Step 1

Open the Visual Studio 2012 and click on File -> New -> Project.

Step 2

A window is opened; in it select Windows Store from the Visual C# template at the left side pane and then select BlankPage from the center pane then give the name of your application and click ok.

Step 3

Open the MainPage.xaml file.

Step 4

To perform Rotation add the slider as:

<Slider Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" VerticalAlignment="Center" Width="195" Minimum="0" Maximum="360" Value="{Binding ElementName=ImageTransform, Path=Rotation, Mode=TwoWay}" Height="50" />

In this the "Minimum=0" denotes that the slider value starts from 0 (0 degrees) and goes to 360 degrees as "Maximum=360". So that is image is rotated at any angle between 0 and 360. The Value attribute defines the Binding of the image that we want to rotate and gives the path of Rotation because we perform rotation and the mode is two-way, so the image is rotated in two directions. Similarly the sliders are added to the Translate operation.

Step 5

The Image control is used as an object in which we perform the operation, we set the properties of the images as:
 

<Image Source="richa.jpg" Width="300" Grid.Row="4" Grid.Column="1">          

   <Image.RenderTransform>

         <CompositeTransform x:Name="ImageTransform" CenterX="150" CenterY="112" />

   </Image.RenderTransform>

</Image>

Step 6

The full code of MainPage.xaml file is as:

<Page

    x:Class="App20.MainPage"

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

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

    xmlns:local="using:App20"

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

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

    mc:Ignorable="d">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FFC5E826" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Grid.RowDefinitions>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>           

            <RowDefinition Height="200"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="250"/>

            <ColumnDefinition Width="auto"/>

        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="1" Text="2-D Transformation Functions" FontSize="25"  VerticalAlignment="Center" Margin="345,38,-345,38"/>

        <TextBlock Text="Rotation" Grid.Row="1" Grid.Column="0" FontSize="20" Grid.ColumnSpan="2" Margin="48,40,279,10" Grid.RowSpan="2"/>

        <TextBlock Text="Translate" Grid.Row="1" Grid.Column="1" FontSize="20" Margin="249,40,-249,10" Grid.RowSpan="2"/>

        <TextBlock Grid.Column="0" Grid.Row="2"  FontSize="20" Text="Rotation (degrees):" Margin="0,0,10,0" VerticalAlignment="Center" />

        <Slider Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" VerticalAlignment="Center" Width="195"  Minimum="0" Maximum="360" Value="{Binding ElementName=ImageTransform, Path=Rotation, Mode=TwoWay}" Height="50" />

        <TextBlock Grid.Column="1" Grid.Row="2" Text="TranslateX:" Margin="76,16,10,0" VerticalAlignment="Center" FontSize="20" Height="34" />

        <Slider Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Center" Width="247"  Minimum="-150" Maximum="150" Value="{Binding ElementName=ImageTransform, Path=TranslateX, Mode=TwoWay}" Margin="393,10,-313,0" Height="40" />

        <TextBlock Grid.Column="1" Grid.Row="3" Text="TranslateY:" Margin="76,16,28,10" VerticalAlignment="Center" FontSize="20" Height="24" />

        <Slider Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" VerticalAlignment="Center" Width="247"  Minimum="0" Maximum="300" Value="{Binding ElementName=ImageTransform, Path=TranslateY, Mode=TwoWay}" Margin="393,0,-313,0" Height="50" />

        <Image Source="richa.jpg" Width="300" Opacity="0.2" Grid.Row="4" Grid.Column="1" />

        <Image Source="richa.jpg" Width="300" Grid.Row="4" Grid.Column="1">          

            <Image.RenderTransform>

                <CompositeTransform x:Name="ImageTransform" CenterX="150" CenterY="112" />

            </Image.RenderTransform>

        </Image>

    </Grid>

</Page> 

Step 7

Now run the application by pressing F5. The output screen is looks like:



When I rotate an image 60 degrees it will look like the following; in this the image with its opacity property shows the original position of the image.

Similarly you can change the slider value and rotate this image in any number of degrees also.

When the image is translated in the X-axis, it looks like:



Translate in Y-axis



Summary

In this article I explained how to use the rotation and translation functions of 2-D Transformation in Windows Store apps.