Transforms Transform Class

Transforms are used to move, rotate, scale and skew elements beyond their assigned placement by the Fuse layout engine.

Transforms are added to elements just like other elements and triggers.

Example

In this example, we scale a circle to become three times its original size:

<Circle Color="Green" Width="50" Height="50">
    <Scaling Factor="3" />
</Circle>

Available transforms

Rotation ux

Rotates the element by the degrees specified.

Scaling ux

Enlarges or shrinks the element by the factor specified.

Shear ux

Applies a shear to the visual (skews it). If you wish to animate the shear use a Skew animator instead.

Translation ux

Represents a linear offset in space. For animated translation, consider using a Move animator instead of animating the properties of this class.

Location

Namespace
Fuse
Package
Fuse.Nodes 2.9.1
Show Uno properties and methods

Interface of Transform

IsFlat : bool uno

Whether this tranform keeps the object strictly in the XY-plane. This property is used for optimization and must be computed correctly in derived classes.

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation

Remarks

Why not just Move, Scale and Rotate directly?

When you want to do several transformations on the same element, the order in which they are applied matters. Being explicit about adding transforms lets us exploit this fact.

<Rectangle Color="Green" Width="50" Height="50">
    <Translation X="100" />
    <Rotation Degrees="45" />
</Rectangle>

<Rectangle Color="Red" Width="50" Height="50">
    <Rotation Degrees="45" />
    <Translation X="100" />
</Rectangle>

The top rectangle is moved 100 points to the right, and then rotated by 45 degrees. It ends up being placed 100 points to the right of its original position.

The second rectangle however is rotated first, and then moved. Because of the initial rotation, the positive X direction is now towards the bottom right. Because of this, the rectangle ends up 100 points towards the bottom right.

Caveats

Scaling an element too much can lead to aliasing effects. This is because the element being scaled is first rendered to a texture, which then gets scaled. This makes animating the Scaling very fast compared to animating an elements Width and Height.