CompositeTransform
CompositeTransform
CompositeTransform
CompositeTransform
Class
Definition
Applies multiple transform operations to an object.
public : sealed class CompositeTransform : Transform, ICompositeTransformpublic sealed class CompositeTransform : Transform, ICompositeTransformPublic NotInheritable Class CompositeTransform Inherits Transform Implements ICompositeTransform// This API is not available in Javascript.
<CompositeTransform .../>
- Inheritance
-
CompositeTransformCompositeTransformCompositeTransformCompositeTransform
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited methods
Inherited properties
Examples
This example shows how to apply the same transforms to an object by using either a CompositeTransform or a TransformGroup.
<StackPanel Margin="50">
<Canvas Background="Black" Width="200" Height="200">
<Rectangle Height="100" Width="100" Fill="Red">
<Rectangle.RenderTransform>
<!-- This one line of markup is the equivalent of the entire
TransformGroup block in the other Canvas below. -->
<CompositeTransform SkewX="30" Rotation="45" ScaleX="0.8" ScaleY="0.8" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Canvas Margin="10" Background="Black" Width="200" Height="200">
<Rectangle Height="100" Width="100" Fill="Red">
<Rectangle.RenderTransform>
<TransformGroup>
<!-- Note that you have to apply these transforms in
a specific order to get the same effect as the
CompositeTransform. -->
<ScaleTransform ScaleX="0.8" ScaleY="0.8" />
<SkewTransform AngleX="30" />
<RotateTransform Angle="45" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</StackPanel>
Remarks
CompositeTransform applies multiple transforms in this order:
- Scale (ScaleX, ScaleY )
- Skew (SkewX, SkewY )
- Rotate (Rotation )
- Translate (TranslateX, TranslateY )
If you want to apply multiple transforms to an object in a different order, you can create a TransformGroup and insert the transforms in your intended order.
CompositeTransform uses the same center point (CenterX, CenterY ) for all transformations. If you want to specify different center points per transform, use TransformGroup.
Constructors
CompositeTransform() CompositeTransform() CompositeTransform() CompositeTransform()
Initializes a new instance of the CompositeTransform class.
public : CompositeTransform()public CompositeTransform()Public Sub New()// This API is not available in Javascript.
Properties
CenterX CenterX CenterX CenterX
Gets or sets the x-coordinate of the center point for all transforms specified by the CompositeTransform in device-independent pixel (DIP) relative to the upper left-hand corner of the element.
public : double CenterX { get; set; }public double CenterX { get; set; }Public ReadWrite Property CenterX As double// This API is not available in Javascript.
<CompositeTransform CenterX="double"/>
- Value
- double double double double
The x-coordinate of the center point for all transforms specified by the CompositeTransform.
CenterXProperty CenterXProperty CenterXProperty CenterXProperty
Identifies the CenterX dependency property.
public : static DependencyProperty CenterXProperty { get; }public static DependencyProperty CenterXProperty { get; }Public Static ReadOnly Property CenterXProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CenterX dependency property.
CenterY CenterY CenterY CenterY
Gets or sets the y-coordinate of the center point for all transforms specified by the CompositeTransform in device-independent pixel (DIP) relative to the upper left-hand corner of the element.
public : double CenterY { get; set; }public double CenterY { get; set; }Public ReadWrite Property CenterY As double// This API is not available in Javascript.
<CompositeTransform CenterY="double"/>
- Value
- double double double double
The y-coordinate of the center point for all transforms specified by the CompositeTransform.
CenterYProperty CenterYProperty CenterYProperty CenterYProperty
Identifies the CenterY dependency property.
public : static DependencyProperty CenterYProperty { get; }public static DependencyProperty CenterYProperty { get; }Public Static ReadOnly Property CenterYProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CenterY dependency property.
Rotation Rotation Rotation Rotation
Gets or sets the angle, in degrees, of clockwise rotation.
public : double Rotation { get; set; }public double Rotation { get; set; }Public ReadWrite Property Rotation As double// This API is not available in Javascript.
<CompositeTransform Rotation="double"/>
- Value
- double double double double
The angle, in degrees, of clockwise rotation. The default is 0.
RotationProperty RotationProperty RotationProperty RotationProperty
Identifies the Rotation dependency property.
public : static DependencyProperty RotationProperty { get; }public static DependencyProperty RotationProperty { get; }Public Static ReadOnly Property RotationProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Rotation dependency property.
ScaleX ScaleX ScaleX ScaleX
Gets or sets the x-axis scale factor. You can use this property to stretch or shrink an object horizontally.
public : double ScaleX { get; set; }public double ScaleX { get; set; }Public ReadWrite Property ScaleX As double// This API is not available in Javascript.
<CompositeTransform ScaleX="double"/>
- Value
- double double double double
The scale factor along the x-axis. The default is 1.
ScaleXProperty ScaleXProperty ScaleXProperty ScaleXProperty
Identifies the ScaleX dependency property.
public : static DependencyProperty ScaleXProperty { get; }public static DependencyProperty ScaleXProperty { get; }Public Static ReadOnly Property ScaleXProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ScaleX dependency property.
ScaleY ScaleY ScaleY ScaleY
Gets or sets the y-axis scale factor. You can use this property to stretch or shrink an object vertically.
public : double ScaleY { get; set; }public double ScaleY { get; set; }Public ReadWrite Property ScaleY As double// This API is not available in Javascript.
<CompositeTransform ScaleY="double"/>
- Value
- double double double double
The scale factor along the y-axis. The default is 1.
ScaleYProperty ScaleYProperty ScaleYProperty ScaleYProperty
Identifies the ScaleY dependency property.
public : static DependencyProperty ScaleYProperty { get; }public static DependencyProperty ScaleYProperty { get; }Public Static ReadOnly Property ScaleYProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ScaleY dependency property.
SkewX SkewX SkewX SkewX
Gets or sets the x-axis skew angle, which is measured in degrees counterclockwise from the y-axis. A skew transform can be useful for creating the illusion of three-dimensional depth in a two-dimensional object.
public : double SkewX { get; set; }public double SkewX { get; set; }Public ReadWrite Property SkewX As double// This API is not available in Javascript.
<CompositeTransform SkewX="double"/>
- Value
- double double double double
The skew angle, which is measured in degrees counterclockwise from the y-axis. The default is 0.
SkewXProperty SkewXProperty SkewXProperty SkewXProperty
Identifies the SkewX dependency property.
public : static DependencyProperty SkewXProperty { get; }public static DependencyProperty SkewXProperty { get; }Public Static ReadOnly Property SkewXProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SkewX dependency property.
SkewY SkewY SkewY SkewY
Gets or sets the y-axis skew angle, which is measured in degrees counterclockwise from the x-axis. A skew transform can be useful for creating the illusion of three-dimensional depth in a two-dimensional object.
public : double SkewY { get; set; }public double SkewY { get; set; }Public ReadWrite Property SkewY As double// This API is not available in Javascript.
<CompositeTransform SkewY="double"/>
- Value
- double double double double
The skew angle, which is measured in degrees counterclockwise from the x-axis. The default is 0.
SkewYProperty SkewYProperty SkewYProperty SkewYProperty
Identifies the SkewY dependency property.
public : static DependencyProperty SkewYProperty { get; }public static DependencyProperty SkewYProperty { get; }Public Static ReadOnly Property SkewYProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SkewY dependency property.
TranslateX TranslateX TranslateX TranslateX
Gets or sets the distance to translate along the x-axis.
public : double TranslateX { get; set; }public double TranslateX { get; set; }Public ReadWrite Property TranslateX As double// This API is not available in Javascript.
<CompositeTransform TranslateX="double"/>
- Value
- double double double double
The distance to translate (move) an object along the x-axis, in pixels. This property is read/write. The default is 0.
TranslateXProperty TranslateXProperty TranslateXProperty TranslateXProperty
Identifies the TranslateX dependency property.
public : static DependencyProperty TranslateXProperty { get; }public static DependencyProperty TranslateXProperty { get; }Public Static ReadOnly Property TranslateXProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TranslateX dependency property.
TranslateY TranslateY TranslateY TranslateY
Gets or sets the distance to translate (move) an object along the y-axis.
public : double TranslateY { get; set; }public double TranslateY { get; set; }Public ReadWrite Property TranslateY As double// This API is not available in Javascript.
<CompositeTransform TranslateY="double"/>
- Value
- double double double double
The distance to translate (move) an object along the y-axis, in pixels. The default is 0.
TranslateYProperty TranslateYProperty TranslateYProperty TranslateYProperty
Identifies the TranslateY dependency property.
public : static DependencyProperty TranslateYProperty { get; }public static DependencyProperty TranslateYProperty { get; }Public Static ReadOnly Property TranslateYProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TranslateY dependency property.