UPF Transforms

Ultraviolet Framework 1.3 added support for assigning transforms to UPF elements. This allows an element's visual appearance, hit tests, and potentially its position within the layout to be modified by various linear transformations, such as scaling, translation, and rotation.

Transform Classes

Transforms are specified using a collection of classes which can be found in the Ultraviolet.Presentation.Media namespace. At present, these are:

• IdentityTransform

  An identity transformation (that is, no transformation).

• MatrixTransform

  An arbitrary transform as specified by a 4x4 transformation matrix.

• RotateTransform

  Rotates the element around a specified axis by some number of degrees.

• ScaleTransform

  Scales the element by the specified factor along its x- and y-axes.

• SkewTransform

  Skews the element by the specified factor along its x- and y-axes.

• TranslateTransform

  Translates the element by the specified distance along the x- and y-axis.

Render Transforms

A render transform modifies an element's visual appearance and hit tests, but does not influence its position or size within the overall layout. An element's render transform is specified using the RenderTransform dependency property defined on FrameworkElement.

Layout Transforms

A layout transform works like a render transform, but it does affect the element's position within the layout. An element's layout transform is specified using the LayoutTransform dependency property defined on FrameworkElement.

Transform Groups

In addition to the individual transforms specified above, there is also a TransformGroup class which represents a collection of multiple transforms. If a TransformGroup instance is assigned to an element's RenderTransform or LayoutTransform properties, the element will be transformed by all of the group's children at once.

<Button Content="Hello, world!">
    <Button.Effect>
        <TransformGroup>
            <ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
            <RotateTransform Angle="45"/>        
        </TransformGroup>
    </Button.Effect>
</Button>