Using Transforms with Expression Blend

Using Microsoft Expression Blend, you can easily reposition, resize, scale, rotate and skew your objects. You can achieve this by making changes on the artboard at design time or by changing the properties in the Layout and Transform categories of the Properties panel.

For a WPF or Silverlight application, Microsoft Expression Blend supports the following types of transformations:

• Translate
• Rotate
• Scale
• Skew
• Center Point
• Flip

Translate: Enables you to reposition an object by providing X and Y values.

Rotate: Enables you to rotate an object by specifying an angle.

Scale: Enables you to scale or resize an object by providing X and Y values.

Skew: Enables you to skew an object by providing X and Y values.

Center Point: Enables you to provide a new center point for the object by specifying X and Y values.

Flip: Enables you to flip an object by its x axis or y axis.

Note: The first four transforms map to transform classes in the System.Windows.Media namespace. You can read about them here on the MSDN library.

To implement these transforms, let us create a WPF application using Microsoft Expression Blend. Name the application as WpfTransforms. Figure 1 shows the creation of the application.



Figure 1

Add an image control to the artboard using the Assets pane (Window -Assets) and set its Source property to Sunset.jpg. This image is freely available in the Sample Pictures folder of your machine, provided you use a Windows OS. Figure 2 shows the image added to the artboard.



Figure 2

Click Window -Objects and Timeline and click the + symbol to create a new Storyboard.



Figure 3

In the new Storyboard, while the storyboard is in recording mode, move the keyframe from 0 to 1, click the Image and then open the properties window using Window-Properties.
Scroll down in the properties window till you come to the Transform section. Figure 4 shows how the Transform section looks like.



Figure 4

In this section, you can choose the various types of transforms that can be applied to your object. Figure 5 shows the transform type represented by each icon.



Figure 5

Click Translate and specify 15 and 15 for the X and Y values respectively. This will reposition or move the Image by 15 in X direction and 15 in Y direction.

Move the keyframe from 1 to 2 seconds and select Rotate transform. Specify the Angle as 20. This will rotate the image by 20 degrees.

Then move the keyframe from 2 to 3 seconds and select Scale transform. Specify the X and Y values as 1.5 and 1 respectively. This will resize the image by the specified values.

Again, move the keyframe from 3 to 4 seconds and select Skew transform. Specify the X and Y values as 2 and 4 respectively. This will skew the image by the specified values.

Move the keyframe from 4 to 5 seconds and select Center Point transform. Specify the X and Y values as 0.5 and 0.5 respectively. This will change the center point of the image to the specified value.

Finally, move the keyframe from 5 to 6 seconds select Flip transform and select Flip X axis. This will flip the image horizontally.

Click Close Storyboard on the Objects and Timeline section.

Build and execute the application.

Conclusion: Thus, you saw different kinds of transforms and how to use them in Expression Blend.