Silverlight Skew Transform Example

In this article we will be seeing how to create Silverlight Skew Transform using Visual studio 2010.

Transform classes in Silverlight are used to rotate, scale, skew and translate objects. In this we will be seeing the Skew Transform and its properties.

Namespace: System.Windows.Media

Assembly: System.Windows

Skew Transform:

It is used for creating the illusion of three-dimensional depth in a two-dimensional object. It is defined by the following properties.

• AngleX 
• AngleY
• CenterX
• CenterY                             

AngleX Property:

It is used to specify the x-axis skew angle, which is measured in degrees counterclockwise from the y-axis.

<Canvas Height="200" Width="200" Background="White">

        <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect1" Height="50" Width="50" Fill="Black" Opacity="0.3"></Rectangle>

            <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect" Height="50" Width="50"  Fill="Blue" Opacity="0.5">

            <Rectangle.RenderTransform>

                <SkewTransform x:Name="skewTransform" AngleX="20" ></SkewTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

AngleY Property:

It is used to specify the y-axis skew angle, which is measured in degrees counterclockwise from the x-axis.

 

<Canvas Height="200" Width="200" Background="White">

        <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect1" Height="50" Width="50" Fill="Black" Opacity="0.3"></Rectangle>

            <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect" Height="50" Width="50"  Fill="Blue" Opacity="0.5">

            <Rectangle.RenderTransform>

                <SkewTransform x:Name="skewTransform" AngleY="20" ></SkewTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

AngleX=20; AngleY=20;

<Canvas Height="200" Width="200" Background="White">

        <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect1" Height="50" Width="50" Fill="Black" Opacity="0.3"></Rectangle>

            <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect" Height="50" Width="50"  Fill="Blue" Opacity="0.5">

            <Rectangle.RenderTransform>

                <SkewTransform x:Name="skewTransform" AngleX="20" AngleY="20" ></SkewTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

AngleX=20; AngleY=20; CenterX="20"; CenterY="20";

<Canvas Height="200" Width="200" Background="White">

        <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect1" Height="50" Width="50" Fill="Black" Opacity="0.3"></Rectangle>

            <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect" Height="50" Width="50"  Fill="Blue" Opacity="0.5">

            <Rectangle.RenderTransform>

                <SkewTransform x:Name="skewTransform" CenterX="20" CenterY="20" AngleX="20" AngleY="20" ></SkewTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010. 
2. Go to File => New => Project. 
3. Select Silverlight from the Installed templates and choose the Silverlight Application template. 
4. Enter the Name and choose the location. 
5. Click OK. 
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site". 
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

<UserControl x:Class="SilverlightSkewTransform.MainPage"

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

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

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

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

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

<Canvas Height="200" Width="200" Background="White">

        <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect1" Height="50" Width="50" Fill="Black" Opacity="0.3"></Rectangle>

            <Rectangle Canvas.Left="75" Canvas.Top="75" x:Name="rect" Height="50" Width="50"  Fill="Blue" Opacity="0.5">

            <Rectangle.RenderTransform>

                <SkewTransform x:Name="skewTransform" CenterX="20" CenterY="20" AngleX="20" AngleY="20" ></SkewTransform>

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

</UserControl>

Testing the solution:

1. Build the solution. 
2. Hit ctrl+F5.