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.
Example
<Page ux:Template="Main">
<Transition To="Contacts">
<Move X="-1" RelativeTo="ParentSize" Duration="1"/>
</Transition>
<Transition>
<Move Y="1" RelativeTo="ParentSize" Duration="1"/>
</Transition>
</Page>
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.
Priority
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 thanAny
To
page name matchFrom
page name matchDirection
ofToBack
,FromBack
,ToFront
,FromFront
Direction
ofToActive
,ToInactive
Direction
ofInFront
,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"/>
</Transition>
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
.
Location
- Namespace
- Fuse.Triggers
- Package
- Fuse.Controls.Navigation 2.9.1
Interface of Transition
Direction : TransitionDirection ux
From : string ux
Mode : TransitionMode ux
Style : string ux
If non-null then only a navigation operation style will match this transition.
To : string ux
Transition Constructor uno
Creates a new Transition
UseTransition : NavigationControlTransition ux
Inherited from Trigger
Actions : IList of TriggerAction ux
A list of actions that execute with the trigger. These may react on simple direction changes, or at specific time offsets.
Activate(Action) uno
Animators : IList of Animator ux
BackwardAnimation : TriggerAnimation ux
Bypass : TriggerBypassMode ux
BypassActivate uno
BypassDeactivate uno
BypassSeek(double, AnimationVariant) uno
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
DirectActivate(Action) uno
DirectDeactivate uno
DirectSeek(double, AnimationVariant) uno
HasActions : bool uno
HasAnimators : bool uno
HasBackwardAnimation : bool uno
true
if there is an explicit backward animation.
InversePulse uno
OnPlayStateChanged(TriggerPlayState) uno
OnProgressChanged uno
PlayEnd(bool, Action) uno
Play the trigger from where it currently is to the end.
PlayTo(double, AnimationVariant) uno
Progress : double uno
Pulse uno
PulseBackward uno
RecreateAnimationState uno
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.
Seek(double, AnimationVariant) uno
Start uno
Stop(bool) uno
StretchDuration : double ux
Stretches the duration of the animation to fill up this period of time.
TimeMultiplier : double ux
Specifies a multiplier to the elapsed time for animation playback.
Inherited from NodeGroupBase
FindTemplate(string) : Template uno
Nodes : IList of Node ux
Nodes to add to the Parent when this trigger is any non-deactivated state (Progress > 0)
OnNodeAdded(Node) uno
OnNodeRemoved(Node) uno
Resources : IList of Resource ux
Templates : IList of Template ux
Inherited from Node
Add(Binding) uno
Bindings : IList of Binding ux
The list of bindings belonging to this 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.
FindByType<T> : T uno
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.
GetNearestAncestorOfType<T> : T uno
Insert(int, Binding) uno
IsRootingCompleted : bool uno
Whether rooting for this node is completed. Returns false if unrooting has started.
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.
NextSibling<T> : T uno
Returns the next sibling node of the given type.
OnDataChanged(string, object) uno
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.
OnUnrooted uno
Parent : Visual uno
The parent Visual of this node. Will return null if the node is not rooted.
PreviousSibling<T> : T uno
Returns the next sibling node of the given type.
Properties : Properties uno
A linked list holding data for extrinsic properties.
Remove(Binding) : bool uno
SoftDispose uno
SourceFileName : string ux
hide
SourceLineNumber : int ux
hide
SubtreeToString : string uno
SubtreeToString(StringBuilder, int) uno
TryGetResource(string, Predicate<object> (object), object) : bool uno
VisitSubtree(Action<Node> (Node)) uno
Inherited from PropertyObject
AddPropertyListener(IPropertyListener) uno
OnPropertyChanged(Selector, IPropertyListener) uno
OnPropertyChanged(Selector) uno
RemovePropertyListener(IPropertyListener) uno
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
GetType : Type uno
ToString : string uno
Attached UX Attributes
GlobalKey (attached by Resource) : string ux
Implemented Interfaces
IList<Binding> uno
IScriptObject uno
Interface for objects that can have a script engine representation
IProperties uno
ISourceLocation uno
hide