Bottom toolbar and button status

Hello, I have this bottom bar:

Pretty much the markup is:

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

BottomMenuItem markup relevant code is:

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

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…


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

    this.isToggled = Observable(false);

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