0

I'm making a nested/hierarchical menu using Visual States as my way of navigating. This works very nicely when going left to right in the menu. If I click Main Menu 3, it turns blue and the attached Sub Menu pops up, same thing if I click Sub Menu 2. The problem now is if I click Main Menu 1, Sub Menu 2 and SubSubMenu4 will remain "selected" (read: blue), although they will be removed from the screen.

My menus/submenus are nested like shown here

My idea here is that I want a better structure for my Visual States. I think I need the following:

  1. One Base State with everything unselected

Idea here being that whenever I hit a button, it will deselect everything, and remove all submenus. (Then repopulate if called by from an element further in).

  1. 5 Main Menu States

These should ideally automagically inherit the base state so that I can't select them all at once, and only keep one sub menu open.

  1. 5 * x Sub Menu States

For each Menu item, I need States for each of the Sub Menus within every Menu item, ideally these would go through the cycle again. Deselect everything, select the chosen Main Menu item then select the sub menu item, as well as open the respective subsubmenu.

  1. 5 * x * x SubSub Menu States

You get the drift now, these should also deselect everything then reselected my previous choices.

So, has anyone a better idea how to solve this, as I am guessing this could potentially turn into a 100 States? Is there at least an easy way of making each Visual State inherit from its "parent"?

<TextBlock x:Name="MainMenu3" Text="MainMenu3" Foreground="Black">
  <i:Interaction.Triggers>
   <interactivity:RoutedEventTrigger RoutedEvent="interactivity:InteractionControl.TouchPress">
     <ei:GoToStateAction StateName="MainMenu3"/>
    </interactivity:RoutedEventTrigger>
   </i:Interaction.Triggers>
  </TextBlock>
dymanoid
  • 14,771
  • 4
  • 36
  • 64
Tom
  • 1,747
  • 5
  • 23
  • 39
  • 1
    The visual states are not designed for those kind of things (navigation). A single state should represent a control's state ("disabled", "hovered", "highlighted", and so on). So I guess it is hardly possible to achieve what you want using the visual states. – dymanoid Sep 04 '17 at 13:25
  • Well, I eventually made it having lots of repetitive coding. And it looks and feels good actually. However, it was a lot of work and it felt bad so I am gonna rebuild from scratch. This is not very friendly if I were to add more elements eventually, it's a pain to maintain, and you can feel it while coding that this is wrong. In conclusion, I consider this experiment as possible, but far from optimal. That being said, if a meny is sufficiently small this could be one way to do it, as making it look good is pretty easy this way. Consider this post closed. – Tom Sep 05 '17 at 11:37

0 Answers0