StateGroup Class - Fuse Documentation

Jump to:
Table of Contents

StateGroup manages a set of State triggers, making sure only a single State is active at once. A State is a regular Trigger that is controlled by a StateGroup. Animators inside a State define what should change while that state is active.

The basic structure of a StateGroup looks like this:

<StateGroup>
    <State ux:Name="firstState" />
    <State ux:Name="secondState" />
</StateGroup>

Now, this setup does nothing at all. We need to add some animators to our States, so that they actually do something. We'll add a Panel as well, so we have something to animate.

<Panel ux:Name="thePanel" Width="100" Height="100" />
    <StateGroup>
        <State ux:Name="firstState">
            <Change thePanel.Color="#f00" />
        </State>
        <State ux:Name="secondState">
            <Change thePanel.Color="#00f" />
        </State>
    </StateGroup>
</Panel>

Since the first State in a StateGroup will be activated by default, the above example will display a red Panel.

At this point, we'd like to switch to a different state somehow. This can be achieved in several ways, as seen below.

The `Active` property

The Active property can be used to activate a particular State. The below example displays a colored Panel, along with three buttons that change its color.

<StackPanel>
    <Panel ux:Name="thePanel" Width="100" Height="100" />

    <StateGroup ux:Name="stateGroup">
        <State ux:Name="redState">
            <Change thePanel.Color="#f00" Duration="0.2"/>
        </State>
        <State ux:Name="greenState">
            <Change thePanel.Color="#0f0" Duration="0.2"/>
        </State>
        <State ux:Name="blueState">
            <Change thePanel.Color="#00f" Duration="0.2"/>
        </State>
    </StateGroup>

    <Grid ColumnCount="3">
        <Button Text="Red">
            <Clicked>
                <Set stateGroup.Active="redState"/>
            </Clicked>
        </Button>
        <Button Text="Green">
            <Clicked>
                <Set stateGroup.Active="greenState"/>
            </Clicked>
        </Button>
        <Button Text="Blue">
            <Clicked>
                <Set stateGroup.Active="blueState"/>
            </Clicked>
        </Button>
    </Grid>
</StackPanel>

TransitionState

Instead of directly jumping to a particular state, the TransitionState action can be used to advance to the next State in a StateGroup, following the order in which they are declared. If a TransitionState is triggered while the last State is active, it wraps around to activate the first State.

The following example displays a panel that will cycle its color between red, green and blue when clicked.

<Panel ux:Name="thePanel" Width="100" Height="100">
    <StateGroup ux:Name="stateGroup">
        <State ux:Name="redState">
            <Change thePanel.Color="#f00" Duration="0.2"/>
        </State>
        <State ux:Name="greenState">
            <Change thePanel.Color="#0f0" Duration="0.2"/>
        </State>
        <State ux:Name="blueState">
            <Change thePanel.Color="#00f" Duration="0.2"/>
        </State>
    </StateGroup>

    <Clicked>
        <TransitionState Type="Next" Target="stateGroup" />
    </Clicked>
</Panel>

Controlling StateGroup using JavaScript

A StateGroup may be controlled via its JavaScript interface. This is done either by calling the goto(state) or gotoNext() methods on the StateGroup itself, or by calling the goto() method on a particular State.

<JavaScript>
    exports.gotoNextState = function()
    {
        stateGroup.gotoNext();
    }

    exports.gotoSecondState = function()
    {
        stateGroup.goto(secondState);
    }

    exports.gotoThirdState = function()
    {
        thirdState.goto();
    }
</JavaScript>

<StateGroup ux:Name="stateGroup">
    <State ux:Name="firstState">
        <!-- ... -->
    </State>
    <State ux:Name="secondState">
        <!-- ... -->
    </State>
    <State ux:Name="thirdState">
        <!-- ... -->
    </State>
</StateGroup>

<StackPanel>
    <Button Clicked="{gotoNextState}" Text="Next state" />
    <Button Clicked="{gotoSecondState}" Text="Second state" />
    <Button Clicked="{gotoThirdState}" Text="Third state" />
</StackPanel>

Transition

We can also specify the Transition property, which can be either Exclusive or Parallel. Exclusive means that each state will have to be fully deactivated before the next state becomes active. Parallel means that as one state deactivates, the next one will become active and whatever properties they animate will be interpolated between them.

Location

Namespace: Fuse.Triggers
Package: Fuse.Triggers 2.9.1

Show Uno properties and methods

Interface of StateGroup

Active : State ux

FindObjectByName(Selector, Predicate<object> (object)) : object uno

goto(state) js

Transition to a target state.

gotoNext() js

Transition to the next state (the one after the current one). This wraps around to the first state if at the last one.

GotoNextState uno

Rest : State ux

StateGroup Constructor uno

Creates a new StateGroup

States : IList of State ux

Transition : StateTransition 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.