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.

Open-Windows-Store-Apps.jpg

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:

Skewing-In-2-D-Transformation.jpg

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

Skewing-In-2-D-Transformation-In-X-Axis-Using-Windows-Store-Apps.jpg

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

Skewing-In-2-D-Transformation-In-Y-Axis-Using-Windows-Store-Apps.jpg

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

Skewing-In-2-D-Transformation-In-Both-X-Y-Axis-Using-Windows-Store-apps.jpg

Summary


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

Up Next
    Ebook Download
    View all
    Learn
    View all