RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: Transformations (and Robots!) : Page 2

WPF's transformations make it easy to move, scale, or rotate objects, and simplify building complex moveable 3D shapes.


Transforming Brushes and Transform Properties

The TransformedBrush program example shown in Figure 2 fills a rectangle with a radial gradient brush that has been rotated 30 degrees.

Figure 2. Better Brush: You can produce interesting effects by using WPF transformations on brushes.

Here's how TransformedBrush draws its rectangle. Notice that the RotateTransform object rotates the brush around the point (150, 50), which is the center of the rectangle.

<Rectangle Margin="10" Width="300" Height="100"
 Stroke="Brown" StrokeThickness="5">
                <RotateTransform Angle="30"
                 CenterX="150" CenterY="50"/>
            <GradientStop Color="Blue" Offset="0"/>
            <GradientStop Color="White" Offset="0.5"/>
            <GradientStop Color="Blue" Offset="1"/>
Figure 3. Transformed Table: This program uses RotateTransform objects to display vertical labels.

Drawing interesting graphics is always fun, but the sample program VisualStudioFeatures (see Figure 3) shows a more practical use for transformations. It uses RotateTransform objects to display labels rotated sideways. The same chart with non-rotated labels would take up much more space.

Transform Properties

Objects that support transformations provide two properties that you can assign to a transformation object: LayoutTransform and RenderTransform.

Figure 4. Layout vs. Render: If you use a LayoutTransform, WPF transforms objects before performing layout.

When you use the LayoutTransform property, WPF transforms the object before applying its layout algorithms. For example, if you stretch an object vertically, it becomes taller, so if it is contained in a StackPanel, the StackPanel creates extra room for the object's new size.

When you use the RenderTransform property, WPF performs its normal layout chores and applies the transformation only when it is drawing the object. That means controls such as StackPanel won't take the transformed object's size into account when they perform layout. That may be a little more efficient but can lead to strange results.

The sample program Transformations (see Figure 4) shows the difference between the LayoutTransform and RenderTransform properties. Both sides of the program display three buttons inside a StackPanel. The buttons on the left rotate using RenderTransforms while those on the right use LayoutTransforms so their StackPanel allows room for them.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date