Transformation in WPF

In this article i am going to explain some basics about transformations in WPF. 

List of different transformation available in WPF

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

Rotate Transform

Rotate transform rotates an element to the specified Angle. To rotate an element to specific degree you can specify value to Angle property of Rotate Transform class. You can also set negative value to rotate an element anticlockwise. You can use CenterX and CenterY properties to specify center point of rotation. By default it takes top left corner of an element as center point and relatively rotation will apply.

    <Canvas>

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="10" Canvas.Top="50" />

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="150" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <RotateTransform Angle="25" />

            </Rectangle.RenderTransform>

        </Rectangle>

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="275" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <RotateTransform Angle="-25" 

                                 CenterX="50" CenterY="50" />

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

Scale Transform

Scale Transform scales an element by specified ScaleX and ScaleY values. ScaleX and ScaleY value resize the element. If you specify ScaleX to 1.5 then it will scales an element horizontally to 150 percent and same applies to ScaleY. You can also specify CenterX and CenterY properties to specify center point of Scale Transform.

    <Canvas>

        <Rectangle Fill="blue" Height="75" Width="75"

                   Canvas.Left="10" Canvas.Top="50" />

        <Rectangle Fill="blue" Height="75" Width="75"

                   Canvas.Left="150" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <ScaleTransform ScaleX="0.5" ScaleY="0.5" />

            </Rectangle.RenderTransform>

        </Rectangle>

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="250" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <ScaleTransform ScaleX="1.5" ScaleY="1.5" />

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

Skew Transform

Skew Transform skews an element by specified AngleX and AngleY values. You can specify AngleX and AngleY properties to skew an element to the angle of x-axis and y-axis. You can also specify CenterX and CenterY properties to specify center point of Skew Transform.

    <Canvas>

        <Rectangle Fill="blue" Height="75" Width="75"

                   Canvas.Left="10" Canvas.Top="50" />

        <Rectangle Fill="blue" Height="75" Width="75"

                   Canvas.Left="120" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <SkewTransform  AngleX="20" AngleY="20" />

            </Rectangle.RenderTransform>

        </Rectangle>

        <Rectangle Fill="blue" Height="75" Width="75"

                   Canvas.Left="250" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <SkewTransform  AngleX="-20" AngleY="-20" 

                                CenterX="75" CenterY="75" />

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

Translate Transform

Translate transform moves an element based on two X and Y property. It doesn’t move based on center position.  It simply moves an element horizontally(X) and vertically (Y) based on current position.

    <Canvas>

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="10" Canvas.Top="50" />

        <Rectangle Fill="blue" Height="75" Width="75" 

                   Canvas.Left="120" Canvas.Top="50">

            <Rectangle.RenderTransform>

                <TranslateTransform  X="30" Y="30" />

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

Matrix Transform

It can be used to create custom 2D transformation. You can create custom transformation using Matrix Transformation which is not provided by above mentioned basic transformation (like Rotate, Scale, Skew and Translate Transformation). You can create Matrix Transformation by using M11, M12, M21, M22, OffsetX and OffsetY parameters. Where M11 and M22 are used to stretch an element, M12 and M21 are used to skew an element and OffsetX and OffsetY are used to position an element.

<Canvas>

        <Button Content="Matrix" Canvas.Top="20" Canvas.Left="20" >

            <Button.RenderTransform>

                <MatrixTransform>

                    <MatrixTransform.Matrix>

                        <Matrix M11="3" M22="3" M12="0.5"

M21="-0.5" OffsetX="20" OffsetY="1" />

                    </MatrixTransform.Matrix>

                </MatrixTransform>

            </Button.RenderTransform>

        </Button>

</Canvas>

You can also create Matrix Transformation by assigning simple string to RenderTransform like this (this applies to only Matrix Transformation).

<Button RenderTransform="3,0.5,-0.5,3,20,1"  

        Content="Matrix" Canvas.Top="20" Canvas.Left="20" />

Where the sequence of comma separated list will be M11, M12, M21, M22, OffsetX and OffsetY.

Multiple Transformations

You can apply multiple transformations to single element. To apply multiple transformations you need use TransformGroup class and inside TransformGroup you can add multiple Transform in it.

    <Canvas>

        <Button Content="Multiple Transformation" 

                Canvas.Top="40" Canvas.Left="20" Width="150" />

        <Button Content="Multiple Transformation"

                Canvas.Top="60" Canvas.Left="20" Width="150">

            <Button.RenderTransform>

                <TransformGroup>

                    <ScaleTransform ScaleX="1" ScaleY="-1" 

                                  CenterX="25" CenterY="12" />

                    <SkewTransform AngleX="10" />

                </TransformGroup>

            </Button.RenderTransform>

        </Button>

    </Canvas>

Hope, you like this post and also helps you to understand more about WPF Transformations. 


Please post your suggestion/queries/feedback in comments if any.