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

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.

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