Transformations in WPF (2D Transformations)

Introduction

The literal meaning of Transform is "To change the appearance or form of". In WPF Transform defines how to map points from one coordinate to another coordinate. WPF uses the transformation matrix to rotate, scale, skew and move the object, But in this article, we will not learn about the transformation matrix to transform the elements. WPF provides several Transform classes that enable you to transform the object without changing the matrix values directly.

Transform Classes

Windows Presentation Foundation (WPF) provides the following 2D Transform classes for common transformation operations:

• Rotate Transform
• Scale Transform
• Skew Transform
• Translate Transform

First, understand the coordinate systems for Transformations

See the left top corner (0,0), In WPF The transform occurs in respective of (0, 0) coordinate of the object  (or can say, transform is centred to the 0,0 coordinate of the object). there is an exception for the TranslateTransform but we will discuss it later. So assume (0,0) is the centre of transformation for an object. 

Now, we will see the different type of Transformation Classed provided by WPF.

Rotate Transform

As the Name itself suggesting, RotateTranfrom rotates an element by the specified Angle.

Suppose we want to rotate the object to 45 degrees like below image, for that we can use Angle property in RotateTranfrom. 

    <Grid>
        <Rectangle Name="rectangle" Fill="RoyalBlue" Width="100" Height="100">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

Rotate the object on some other point

So from the above example, we understood, By default, the element rotates about its upper-left corner, (0, 0) and Transform assume (0,0) coordinate as centre and transform respective to it.

Suppose we want to rotate it from the centre of the object like below

 RotateTransformation, ScaleTransformatio and in SkewTransformation class provide CenterX and CenterY properties that enable you to specify the point at which the transform is applied.

In our example, the height and width of the object are 100, so the centre of the object is (width/2, height/2) i.e. (50,50).

    <Grid>
        <Rectangle Name="rectangle" Fill="RoyalBlue" Width="100" Height="100">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45" CenterX="50" CenterY="50" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

ScaleTransform

ScaleTransfrom uses to Scale the element by the specified size (In simple word, Use ScaleTransfrom to resize the element). it provides two properties ScaleX and ScaleY to resize the element. For example, if ScaleX value is set to 1.5 then it stretches the width of the element to 150 percent from the original size. similarly, if ScaleY value is set to 0.5 then it shrinks the height of the element to 50 percent.

In below example, the height and width of the element are 100 and we will use ScaleTrasnform to stretch the size to 2 times(200 percent).

    <Grid>
        <Rectangle Name="rectangle" Fill="RoyalBlue" Width="100" Height="100">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

By default, a SclateTransform is centred at the point (0,0), which corresponds to the upper-left corner of the rectangle. We can use CenterX and CenterY properties to specify the point that is the centre of the scale operation.

    <Grid>
        <Rectangle Name="rectangle" Fill="RoyalBlue" Width="100" Height="100">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="2" ScaleY="2" CenterX="50" CenterY="50"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

SkewTransform

SkewTransform is used to skew the element. See below image to understand the SkewTranform

Original Image

Skew image 

In SkewTransform, AngleX and AngleY properties are used to specify the skew angle of the x-axis and y-axis.

In the above image, the object is skewed at 45 degrees towards x-axis.   

    <Grid>
        <Rectangle Name="rect1" Fill="RoyalBlue" Width="100" Height="100" >
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="45" AngleY="0"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

By Default, SkewTrabsform is also centred at the point (0,0), which corresponds to the upper-left corner of the rectangle. We can use CenterX and CenterY properties to change the centre of Skew operation.

See some example to understand more

example1

    <Grid>
        <Rectangle Name="rect1" Fill="RoyalBlue" Width="100" Height="100" >
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="45" AngleY="0" CenterX="25" CenterY="25"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

example2

    <Grid>
        <Rectangle Name="rect1" Fill="RoyalBlue" Width="100" Height="100" >
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="0" AngleY="45" CenterX="25" CenterY="25"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

One typical use of a SkewTransform is for simulating 3D depth in 2D objects.

SkewTransform 3D illusion

one more example to show 3D illusion. It is not the 3D transform, it just gives you the 3D illusion

    <Grid>
        <Rectangle Name="rect" Width="100" Height="100" Fill="RoyalBlue" Panel.ZIndex="1000" Opacity="0.5">
        </Rectangle>
        <Rectangle Name="rect1" Width="100" Height="100" Fill="RoyalBlue" Opacity="0.7" >
            <Rectangle.RenderTransform>
                <SkewTransform  CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

TranslateTransform

TranslateTransfrom is the simplest transform, By using TranslateTrasfom property, you can move an element within StakePanel or DockPanel.

It has two properties, X and Y, Specify the X property in pixel to move the element along the x-axis. Specify the Y property in pixel to move the element along the y-axis.

The following example uses a TranslateTransform to move an element 50 pixels to the right and 50 pixels down.

    <Grid>
        <Rectangle Name="rect" Width="100" Height="100" Fill="RoyalBlue" Panel.ZIndex="1000" Opacity="0.5">
        </Rectangle>
        <Rectangle Name="rect1" Width="100" Height="100" Fill="RoyalBlue" Opacity="0.8" >
            <Rectangle.RenderTransform>
                <TranslateTransform X="50" Y="50" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>