Composite​Transform Composite​Transform Composite​Transform Composite​Transform 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
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited methods

Inherited properties

Windows.UI.Xaml.Media.GeneralTransform.TryTransform(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransform(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransform(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransform(Windows.Foundation.Point,Windows.Foundation.Point)
Windows.UI.Xaml.Media.GeneralTransform.TryTransformCore(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransformCore(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransformCore(Windows.Foundation.Point,Windows.Foundation.Point)Windows.UI.Xaml.Media.GeneralTransform.TryTransformCore(Windows.Foundation.Point,Windows.Foundation.Point)

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:

  1. Scale (ScaleX, ScaleY )
  2. Skew (SkewX, SkewY )
  3. Rotate (Rotation )
  4. 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the TranslateY dependency property.

See Also