Activate State on StateGroup programmatically

How-to Discussions
1

I’m trying to activate a State on a StateGroup from Uno code. The documentation says that changing StateGroups Active property will initiate the transition, so thats what I tried to do in my ‘Navigate’ function. Any ideas why this isn’t working?

public partial class TabViewer

{

List<TabContent> mContent = new List<TabContent>();

StateGroup mTabGridStateGroup = new StateGroup();


public TabViewer()
{
    InitializeUX();
    mxTabGrid.Behaviors.Add(mTabGridStateGroup);
}

public void AddContent(TabContent content)
{
    //Add State
    State state = new State();
    Move move = new Move();
    move.Target = mxTabRectangle;
    move.X = mContent.Count;
    move.RelativeTo = TranslationMode.Size;
    move.Easing = Easing.SinusoidalInOut;
    move.Duration = 0.3;

    state.Animators.Add(move);
    mTabGridStateGroup.States.Add(state);

    mContent.Add(content);

    //Resize TabRectangle
    mxTabRectangle.Width = 100.0f/mContent.Count;

    //Add button to TabBar
    mxTabGrid.ColumnCount = mxTabGrid.ColumnCount + 1;
    Z_NavButton button = new Z_NavButton();
    button.Clicked += Navigate;
    button.Text = content.Title;
    mxTabGrid.Children.Add(button);
}

void Navigate(object sender, ClickedArgs args)
{
    Button button = sender as Button;

    for(int i = 0; i < mContent.Count; i++)
    {
        if(button.Text == mContent[i].Title)
        {
            mxTabNavigation.Goto(mContent[i].PageForTab);
            mTabGridStateGroup.Active = mTabGridStateGroup.States[i];
            break;
        }
    }
}

}

2

Hi!

It is reccommended to do this from UX code instead of Uno code, this will make it easier to see what the code does.

I don’t see anything directly wrong. Are you sure the mTabGridStateGroup.Active = mTabGridStateGroup.States[i]; line is actually reached?

3

Yes, because mxTabNavigation.Goto is called.

The reason i am doing this in Uno is because states can be added at runtime.

4

You can verify whether a trigger/state is actually activated by using a DebugAction action.

<State ...>
    <DebugAction Message="Made it"/>
</State>

If that is output it means you at least arrive at that state. Then it is a matter of figuring out why the other animator doesn’t do what you expect. My guess is the Move is perhpas not attached to the intended element.

It might be good to explain what you are trying to achieve. It seems that you might be trying to replicate functionality similar to the PageControl and the rectnagle might be a PageIndicator.

5

I can’t find any reference to a PageControl or PageIndicator in the documentation. Is this perhaps something that has not yet been released?

EDIT: I downloaded the newest release and ran the guide for PageControl. I am trying to make a component that has the same functionality, but i would also like the indicators to be buttons that navigates to the correct page. Is there anyway to achieve this with PageControl?