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.