Transform means to alter the form, nature or appearance. In WPF we have classes for 2-D and 3-D Transform. Here in this article we first try to explore about 2D Transformation in WPF, What are the different Transform Classes that helps in the Transformation of objects and how we can Transform them.

Transform defines how we can map, rotate, skew, scale, translate an element. This Mapping is defined by using a 3×3 Matrix transformation.

WPF provides the following 2-D Transform classes for common transformation operations:

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

Namespace : System.Windows.Media
Assembly: PresentationCore.dll

Inheritance
Object -> DispatcherObject -> DependencyObject -> Freezable -> Animatable -> GeneralTransform -> Transform -> Transform Classes

1. Rotate Transform

This class rotates an object clockwise by the angle of degree given. The default center is taken as (0,0), which may not the center of the object. So don’t surprise if it dont rotate about its center. To rotate it around its center, you can set CenterX & CenterY property of Rotate​Transform.

Syntax :

2. Scale Transform

This class is used to stretch or shrink an object horizontally (x-axis) or vertically (y-axis). ScaleX Property defines the object to stretch / shrink along x-axis. Whereas ScaleY Property defines the object to stretch / shrink along y-axis.

Syntax :

3. Skew Transform

It helps in creating an illusion of 3D effect.It skews an object along x and y axis according to the AngleX and AngleY properties.

Syntax :

4. Translate Transform

It simply displaces an object from its position along x-axis and y-axis as provided by setting X Property and Y Property.

Syntax :

TransformGroup – Use to apply multiple transform classes to an element

Syntax :

 <ListBox.RenderTransform>
     <TransformGroup>
         <RotateTransform Angle="35" CenterX="20" CenterY="40" />
         <ScaleTransform ScaleX="1.5" ScaleY="1" />
         <SkewTransform AngleX="15" AngleY="20" />
         <TranslateTransform X="20" Y="40" />
     </TransformGroup>
  </ListBox.RenderTransform>

Full Demonstration

<Window x:Class="Transformation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Transformation" Height="450" Width="525">
    <Grid >
        <ListBox Name="lstTopCompanies" FontSize="15" Height="320" Width="150">
            <ListBoxItem>Google</ListBoxItem>
            <ListBoxItem>Microsoft</ListBoxItem>
            <ListBoxItem>Amazon</ListBoxItem>
            <ListBoxItem>Oracle</ListBoxItem>
            <ListBoxItem IsSelected="True">Seekyourcareer.in</ListBoxItem>
            <ListBoxItem>Adobe</ListBoxItem>
            <ListBoxItem>Wipro</ListBoxItem>
            <ListBoxItem>TCS</ListBoxItem>
            <ListBoxItem>AVEVA</ListBoxItem>
            <ListBoxItem>SAP</ListBoxItem>

             <!--Rotate Transform-->
            <!--<ListBox.RenderTransform>
            </ListBox.RenderTransform>-->

            <!--Scale Transform-->
            <!--<ListBox.RenderTransform>
                <ScaleTransform ScaleX="1.5" ScaleY="1" />
            </ListBox.RenderTransform>-->

             <!--Skew Transform-->
            <!--<ListBox.RenderTransform>
                <SkewTransform AngleX="35" AngleY="25" />
            </ListBox.RenderTransform>-->

             <!--Translate Transform-->
            <!--<ListBox.RenderTransform>
                <TranslateTransform X="100" Y="150" />
            </ListBox.RenderTransform>-->

            <!--All-->
            <ListBox.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="35" CenterX="20" CenterY="40" />
                    <ScaleTransform ScaleX="1.5" ScaleY="1" />
                    <SkewTransform AngleX="15" AngleY="20" />
                    <TranslateTransform X="20" Y="40" />
                </TransformGroup>
            </ListBox.RenderTransform>
        </ListBox>
    </Grid>
</Window>