Skewing In 2-D Transformation Using Windows Store Apps

Introduction

The operations of 2-D Transformation includes Rotation, Scaling, Skewing and Translate. Today I am going to explain the Skewing operation of this 2-D Transformation. In all of these four the skew is probably the trickiest to understand, since its values (in degrees) don't appear to apply in the ways that one might expect. The easiest way to consider skew is to think of the values as "pulling" on opposite sides of the element box to create the angle specified. In order to see how it works let's use the following steps.

Step 1

First you have to open Visual Studio 2012 and then select File -> New -> project. A window is shown; in that window select Windows Store inside the Visual C# from the left pane and then select BlankPage from the center pane then give a name for your application, for eample I used the name "Skewing1", then click ok.



Step 2

Add the image to your application in which you apply the skewing operation.

Step 3

Open the MainPage.xaml file and write the code in this as:

<Page

    x:Class="Skewing1.MainPage"

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

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

    xmlns:local="using:Skewing1"

    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="#FF4DAACD" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <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="Skewing In 2-D Transformation" FontSize="30" Margin="10,10,-300,0" Grid.Row="0" Grid.Column="1"/>

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

        <Slider Name="SkewX" Grid.Row="1" Grid.Column="1" Margin="10,0,0,0" Width="200"  Minimum="0"  Maximum="300" Value="{Binding ElementName=Skewing, Path=SkewX, Mode=TwoWay}"/>

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

        <Slider Name="SkewY" Grid.Row="2" Grid.Column="1" Margin="10,0,0,0" Width="200"  Minimum="0" Maximum="300" Value="{Binding ElementName=Skewing, Path=SkewY, Mode=TwoWay}"/>

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

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

            <Image.RenderTransform>

                <CompositeTransform x:Name="Skewing"/>

            </Image.RenderTransform>

        </Image>

    </Grid>

</Page>

Step 4

Now Run the application by pressing F5; you will see the result as:



When I apply the Skew operation in the X-axis the image looks like:



When move the silder to change the value of Y-axis it will look like:



In both X and Y axes the image looks like when I change both the values of the sliders.



Summary

In this article I explained how to use the skewing operation of 2-D-Transformation using Windows Store apps.