Search code examples
uwptemplate10

Hierarchy navigation with Template 10 Hamburger Template


I'm trying to figure out how to deal with page hierarchies in an UWP app using Template 10 Hamburger Template. In the end, I'd like to be able to select the app's main sections over the Hamburger menu items and have some sort of tab selection to navigate through the sections' views and sub-views, changing the available tabs depending of the context I'm currently in.

The sections of the app are fairly complex and should be navigable as well, e.g. I should be able to navigate to the next higher hierarchy using the back button, so I think the tab navigation will have to be based on frame navigation.

How can I manage that the Hamburger menu item of the section I'm currently in stays selected when I navigate through the pages and sub-pages of the section? Is there an alternative to using the HamburgerButtonInfo's PageType attribute (which binds the selection state of the item to the page that's currently displayed)?

Some Picutres to explain: 1


Solution

  • In order to highlight a hamburger menu item on a 'subpage' you can do the following:

    1. Create a method in your Shell class for selecting the button you want to select in code. In it just set Selected of your HamburgerMenu to the desired HamburgerButtonInfo instance. The PageType must be set to 'null' in order to avoid navigation to the according page.

      public static HamburgerButtonInfo AButton => Instance.MyButton;
      public void HighlightButton(HamburgerButtonInfo button)
      {
          Type pageType = button.PageType;
          button.PageType = null;
          HamburgerMenu.Selected = button;
          button.PageType = pageType;
      }
      
    2. In OnNavigatedTo of your page call that method via Shell.Instance.

      protected override void OnNavigatedTo(NavigationEventArgs e)
      {
          Shell.Instance.HighlightButton(Shell.AButton);
          base.OnNavigatedTo(e);
      }