Transition Class

Controls the animations for page-to-page transitions in a Navigator.

Unlike the EnteringAnimation and ExitingAnimation triggers, Transition allows you to make different animations depending on which page is being navigating to, or away from.


<Page ux:Template="Main">
    <Transition To="Contacts">
        <Move X="-1" RelativeTo="ParentSize" Duration="1"/>
        <Move Y="1" RelativeTo="ParentSize" Duration="1"/>

This page has a special transition if navigating to the Contacts page. In this case it will slide the page to the left. All other transitions away from this page will slide down.

To / From

Every navigation change defines a "To" and "From" page. In Transition these are always defined as the the forward ordering of the pages in the navigation. This ensures that when navigating backward (such as using goBack) the same transitions will be used, but done in reverse.

For example, a <Transition To="Contacts"> matches a forward transition to the Contacts page, as well as a backwards transition from the Contacts page to this one.

Similarly, a <Transtion From="Main"> matches a forward transition from the Main page, as well as a backwards transition from this page to the Main page.


Only one Transition, the one with the highest priority, will be selected for each page change. The priority ordering is:

  • A Style match on the operational style
  • Interaction match other than Any
  • To page name match
  • From page name match
  • Direction of ToBack, FromBack, ToFront, FromFront
  • Direction of ToActive, ToInactive
  • Direction of InFront, Behind
  • Direction Any

If no matching Transition is found then a default one will be created according to the Navigator.Transition property. If you don't want a default then specify a final fallback transition without properties <Transition>.

Play direction

If the page is becoming inactive the transition will be played forward. If the page is becoming active the transition will be played backward. This means the transition is always defining the animation towards the inactive state.

With certain combinations of properties this may at first seem odd, for example:

<Transition Direction="ToActive">
    <Move X="100" Duration="1"/>

This Transition is only selected when the page is becoming the active one. The animation will start at X=100 and move towards X=0 over a duration of 1.

The final state of any active page is always with all transitions deactivated.

Extended Example

The Transition Example shows a variety of page transitions using Transition.


Fuse.Controls.Navigation 1.4.0

Interface of Transition

AutoRelease : bool ux

By default a page will be released once the transition to the inactive state is complete (at the end of this trigger). Set to false to disable this behaviour.

From : string ux

"From" pages matching thing Transition. If specified only transitions from one of these pages will match the trigger. See the remarks on Transition about backward navigation.

Style : string ux

If non-null then only a navigation operation style will match this transition.

To : string ux

"To" pages matching thing Transition. If specified only transitions to one of these pages will match the trigger. See the remarks on Transition about backward navigation.

Inherited from Trigger

BackwardAnimation : TriggerAnimation ux

Specifies an explicit backward animation instead of using the implied backward animation of the animators involved. Be aware that actions are not part of the animation.

CrossFadeDuration : double ux

If there is a transition between forward/backward playback and two timeilnes are being used (implicit or explicit) this specifies the cross-fade time.

Deactivate uno

Deactivates the trigger (target progress of 0).

Pulse uno

Plays the trigger to progress 1 then back to 0.

RequireLayout(Visual) uno

Indicates the trigger is bound to the layout of a visual. This will keep the trigger in Bypass mode until after the first layout of the element is obtained. This is required since layout does not happen in the same root grouping/update phase as the creation of the element, yet not having a layout should qualify as part of the rooting period.

Inherited from NodeGroupBase

Nodes : IList of Node ux

Nodes to add to the Parent when this trigger is any non-deactivated state (Progress > 0)

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

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

IScriptObject uno

Interface for objects that can have a script engine representation