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.
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"
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
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.
Objects that support transformations provide two properties that you can assign to a transformation object: LayoutTransform and RenderTransform.
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.