Lets you create a temporary layout change. This can be used to do visual layout transitions without needing actual layout changes.

It has no noticeable effect on its own, and needs to be combined with a LayoutAnimation. The LayoutAnimation will in turn be triggered by this action.

Example

This example demonstrates TransitionLayout in action when a button is clicked.

<DockPanel>
    <Panel Dock="Top" Height="20" ux:Name="originElement" />
    <Button Height="100" Dock="Bottom" Text="Transition!">
        <LayoutAnimation>
            <Move X="1" Y="1" RelativeTo="WorldPositionChange" Duration="1" />
            <Resize X="1" Y="1" RelativeTo="SizeChange" Duration="1" />
        </LayoutAnimation>
        <Clicked>
            <TransitionLayout From="originElement" />
        </Clicked>
    </Button>
</DockPanel>

When clicked, the Button in this example will perform a transition over 1 second from the position and size of originElement (top edge of the DockPanel) to its actual position and size (bottom edge of the DockPanel).

Location

Namespace
Fuse.Triggers.Actions
Package
Fuse.Elements 2.9.1
Show Uno properties and methods

Interface of TransitionLayout

Target : Element ux

Explicit target that will be transitioned. If not specified the Element ancestor of the action will be used

Inherited from TriggerAction

AtProgress : float ux

A value between 0 and 1 for when the action should be performed. Alternative to Delay.

Delay : float ux

The number of seconds after the start of the trigger that the action should be performed.

TargetNode : Node ux

The node that the action targets. If not specified then the enclsoing Trigger will be used. Several triggers can look for a target starting from this point. Some triggers require a Target to be specified.

Unroot uno

Called when the owner of this object is unrooted. This gives an action to cleanup resources or cancel pending actions.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces