Bottom toolbar and button status

Hello, I have this bottom bar:

Pretty much the markup is:

<Select Data="{view.bottomMenuItems.top}">
  <BottomMenuItem />
</Select>
<Select Data="{view.bottomMenuItems.myPage}">
  <BottomMenuItem />
</Select>
...

BottomMenuItem markup relevant code is:

  <StackPanel>
    <Icon .../>
    <Text .../>
  </StackPanel>
  <StateGroup ux:Name="stateGroup">
    <State ux:Name="defaultState">
      <Change self.Color="#6D8092" />
      <Change self.TxtColor="#ffffff" />
    </State>
    <State ux:Name="enabledState">
      <Change self.Color="#2c3e50" />
      <Change self.TxtColor="#f1c40f" />
    </State>
  </StateGroup>
  <Tapped>
    <Set stateGroup.Active="enabledState" />
  </Tapped>
</Rectangle>

This works, when button is clicked, status changes to enable:

But, how can I synchronize the status of the other buttons? I mean, if I click another one, the others should go back to “disabledState”. I tried different things, but none works…

Hi!

I think the easiest way is to do this is by data-binding the StateGroup.Active property to JavaScript and handle the synchronisation there.

Something like this:

function MenuItem(){
    //add this item to a list which you can use to access the different buttons
    someList.add(this);

    this.isToggled = Observable(false);

    this.toggle = function(){
        ... toggle this and also disable the other buttons ...

    };
}