Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 27 Jun 2007
Download Sample Code
WPF (Windows Presentation Foundation) has many ways to manipulate objects. Some of these ways involve transforming an object, or using animation to animate the various values of an object. These can all work together to provide a very interactive interface. This article will show you how.
previous article, I showed some of the animations available with
WPF. The article showed
how you can use
WPF to animate various properties of an object. This article is going to expand the
original idea to show some of the other animations available.
The article I wrote before had an example of using the
TranslateTransform transformation to move
an object across the screen. That's not the only way to move an object; but first let's examine some of the other
types of transformations. The rectangle has a
RenderTransform property that can take various kinds
of transform objects, such as
MatrixTransform, etc. that can alter the way the object appears on the
Let's look at an example of some
XAML code using the
RotateTransform, which defines
Angle of type
double. This property takes the degree of rotation in 45
degree increments. The
CenterY properties determine the point to rotate around.
XAML defines a button that, when clicked, will rotate in a circular fashion. The
XAML definition for the button is reported in listing 1.
Listing 1: Rotating Button Transform
The rotate transform was given a name, because that makes it easier to work with it in the code.
The following code rotates the object around the
Listing 2: Rotating Button Transform Code
Every time the button is clicked, it rotates 45 degrees. When at angle of 315 degrees, the next
step is reset the value to 0. Clicking the button rotates it around
(75,50) point in a continual
loop. This point is not dead center of the control, so it rotates in an elliptical fashion. In addition to
rotating it, it is possible stretch or skew the button, as we'll see next.
Let's look at an example of scaling and skewing a button. Skewing works in a manner similar to the rotating
button because rotations involve rotating at an angle, though not as severe.
Listing 3: Skewing Button Transform
The code that skews the object changes the angle between 0 and 30 degrees, as shown in listing 4.
Listing 4: Skewing Button Transform Code
Skewing is a little more limited with respect to scaling. Scaling also uses the
CenterY properties, as well as a
of properties. The latter properties specify the factor to use when scaling; so a value of 1 means to scale
Y attributes to the normal size, .5 means scaling the button to half of the original
size, and a value of 2 means double the normal size. When
CenterY is set to
zero, the object scales larger to the right and bottom (scales away from the upper-left corner). When the
CenterY values are set to the middle of the object, the object scales away from
the center point (grows from the center equally). Let's take a look at scaling. Below is the definition of a
Listing 5: Scaling Button Transform
The beginning scale value is .5, meaning half of the original value. The following code will alter
the scale value from .5 up to 2, back down to .25, and back up again over and over. Doing this is really simple,
as shown in the following code.
Listing 6: Scaling Button Transform Code
Scaling is determined by a private variable; and when it reaches 2 or .25, the
value determining the direction is reversed.
Figure 1: Transformations Result
previous article, I showed an example of moving an object across the screen using the translate
transformation. However, there are more interactive ways to do so, such as using
capabilities available in the
WPF framework. Using the path syntax, it is possible to draw lines,
curves, and ellipses that an object can use as its path of movement. The path markup syntax will be explained as
the article goes along, but it would be beneficial to read
the MSDN article on path markup.
Path data uses a special syntax to note the direction of a path. It uses a collection of point data, along
with a series of commands, like
M/m for Move;
C/c for cubic bezier curve;
T/t for specialty Bezier curves;
A/a for arcs; and
H/h for lines. Each command has a series of point arguments that
it takes to determine the total path. For instance, the
(L)ine command takes an
coordinates pair specifying the end point of the line. Curves use a set of control points to control the amount
of curve in the line. In addition, there is a difference between the upper case and lower case letters. Upper
case is an absolute value, whereas lower case is a relative value. Let’s start with a path that creates an
ellipse (looking like a football), as shown in the following listing.
Listing 7: Ellipsis Path
The ellipse defined in the previous code is going to move across a path. That path is setup in a storyboard,
and the data is passed through the
PointAnimationUsingPath animation. Note the path geometry as
defined in the following listing.
Listing 8: Animation using a Path
PointAnimationUsingPath animation takes a path geometry. Path geometry renders a
path which may or may not connect the beginning to the end. It can use a series of lines or curves to form this
path, using a specialized syntax as mentioned before.
M moves the beginning point to
(20,100). L draws a line to
(80,10), followed by a series of three types of Bezier
curves, which end at the
(20,100) starting point. Each of these curves has one or two control
points, with the last set of coordinates being an end point.
Figure 2: Path Animation
Rotating Rectangle Animation
The last animation that I’m going to show you rotates the rectangle around in a circular fashion, using data
provided by a path. As we've seen previously, the
RotateTransform transform controls the amount of
rotation applied to the object. When using this with path data, the rectangle animates in a circular fashion very
smoothly. First, let's look at the setup, as the control uses a gradient and defines a
RotateTransform object named
Listing 9: Gradient Rectangle With Rotating Transform
When the rectangle is loaded, the animation in the following listing is run. The double animation
uses a path geometry (which simplistically consists of a horizontal line) to change the angle from 0 to 359
degrees, and repeat this behavior forever. The targeted property is the
angle property. However,
from the path geometry, it is also possible to use a source value of
Y, or Angle as
Listing 10: Spinning Rectangle Animation
In this example, only the
Angle property is targeted. However, using a
TranslateTransform in combination with the
RotateTransform can provide a realistic
rendering of an object that moves along a path. To see an excellent example of this, check this
Figure 3: Spinning Rectangle Animation
WPF has some advanced capabilities in graphics rendering. As we've seen, animations in
WPF are pretty powerful and provide interesting capabilities when programming with the various
Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare.
In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...
This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.
You might also be interested in the following related blog posts
Architecturing an Extensible and Flexible WPF Client Application using WPFWidgetizer Framework
Making WPF and Kinect app's easier... WpfKinectHelper
Adding some spark to your next WPF project with WPFSpark
Mozilla and Microsoft work together on WPF\ClickOnce plugins
A plea to my developer brethren about designer/designers
WPF Wonders: Building Control Templates
Win7 Multi-touch. Why wait until WPF4?
Telerik Releases New Controls for Silverlight 3 and WPF
Q3 2009 Beta released for Telerik RadControls for Silverlight/WPF
5 Minute Overview of MVVM in Silverlight
Please login to rate or to leave a comment.