Defines functionality that enables transformations in a 2-D plane. Transformations include rotation (RotateTransform), scale (ScaleTransform), skew (SkewTransform), and translation (TranslateTransform). This class hierarchy differs from the Matrix structure because it is a class and it supports animation and enumeration semantics.
Assembly: PresentationCore (in PresentationCore.dll)
[TypeConverterAttribute(typeof(TransformConverter))] [LocalizabilityAttribute(LocalizationCategory.None, Readability = Readability.Unreadable)] public abstract class Transform : GeneralTransform
A 2-D x-y plane uses a 3x3 matrix for transformations. You can multiply affine transformation matrices to form linear transformations, such as rotation and skew (shear) that are followed by translation.
An affine transformation matrix has its final column equal to (0, 0, 1); therefore, you only have to specify the members in the first two columns.
A Windows Presentation Foundation (WPF) Matrix has the following structure:
Methods and properties usually specify the transformation matrix as a vector that has only six members; they are as follows:
The following example rotates a Polyline object 45 degrees about its upper-left corner.
<Canvas Height="200" Width="200"> <!-- Rotates the Polyline 45 degrees about the point (0,0). --> <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50"> <Polyline.RenderTransform> <RotateTransform CenterX="0" CenterY="0" Angle="45" /> </Polyline.RenderTransform> </Polyline> </Canvas>
// Create a Polyline. Polyline polyline1 = new Polyline(); polyline1.Points.Add(new Point(25, 25)); polyline1.Points.Add(new Point(0, 50)); polyline1.Points.Add(new Point(25, 75)); polyline1.Points.Add(new Point(50, 50)); polyline1.Points.Add(new Point(25, 25)); polyline1.Points.Add(new Point(25, 0)); polyline1.Stroke = Brushes.Blue; polyline1.StrokeThickness = 10; // Create a RotateTransform to rotate // the Polyline 45 degrees about its // top-left corner. RotateTransform rotateTransform1 = new RotateTransform(45); polyline1.RenderTransform = rotateTransform1; // Create a Canvas to contain the Polyline. Canvas canvas1 = new Canvas(); canvas1.Width = 200; canvas1.Height = 200; Canvas.SetLeft(polyline1, 75); Canvas.SetTop(polyline1, 50); canvas1.Children.Add(polyline1);
The CenterX and CenterY properties of the RotateTransform specify the point about which the object is rotated. This center point is expressed in the coordinate space of the element that is transformed. By default, the rotation is applied to (0,0), which is the upper-left corner of the object to transform.
The next example rotates a Polyline object clockwise 45 degrees about the point (25,50).
<Canvas Height="200" Width="200"> <!-- Rotates the Polyline 45 degrees about the point (25,50). --> <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50"> <Polyline.RenderTransform> <RotateTransform CenterX="25" CenterY="50" Angle="45" /> </Polyline.RenderTransform> </Polyline> </Canvas>
// Create a Polyline. Polyline polyline2 = new Polyline(); polyline2.Points = polyline1.Points; polyline2.Stroke = Brushes.Blue; polyline2.StrokeThickness = 10; // Create a RotateTransform to rotate // the Polyline 45 degrees about the // point (25,50). RotateTransform rotateTransform2 = new RotateTransform(45); rotateTransform2.CenterX = 25; rotateTransform2.CenterY = 50; polyline2.RenderTransform = rotateTransform2; // Create a Canvas to contain the Polyline. Canvas canvas2 = new Canvas(); canvas2.Width = 200; canvas2.Height = 200; Canvas.SetLeft(polyline2, 75); Canvas.SetTop(polyline2, 50); canvas2.Children.Add(polyline2);
The following illustration shows the results of applying a to the two objects.
The Polyline in the previous examples is a UIElement. When you apply a to the RenderTransform property of a UIElement, you can use the RenderTransformOrigin property to specify an origin for every that you apply to the element. Because the RenderTransformOrigin property uses relative coordinates, you can apply a transformation to the center of the element even if you do not know its size. For more information and for an example, see How to: Specify the Origin of a Transform by Using Relative Values.
For the complete sample, see 2-D Transforms Sample.
|How to: Scale an Element||This example shows how to use a ScaleTransform to scale an element.|
|How to: Skew an Element||This example shows how to use a SkewTransform to skew an element. A skew, which is also known as a shear, is a transformation that stretches the coordinate space in a non-uniform manner. One typical use of a SkewTransform is for simulating 3-D depth in 2-D objects.|
|How to: Translate an Element||This example shows how to translate (move) an element by using a TranslateTransform.|
|How to: Make an Element Spin in Place||This example shows how to make an element spin by using a RotateTransform and a DoubleAnimation.|
|How to: Transform a Brush||This example shows how to transform Brush objects by using their two transformation properties: RelativeTransform and Transform.|
|How to: Apply a Transform to an Element When an Event Occurs||This example shows how to apply a ScaleTransform when an event occurs. The concept that is shown here is the same that you use for applying other types of transformations. For more information about the available types of transformations, see the class or Transforms Overview.|
|How to: Apply a Transform to a BitmapImage||This example demonstrates how to apply a to a BitmapImage.|
Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003
The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.