SplitView Control With Submenu In Universal Windows Program - Part 2

This article is in continuation of SplitView control in Universal app platform - Part 1.

This article will cover how to add Menu & Sub menu in the HamBurgerMenu using SplitView control.

  1. In the SplitView pane create StackPanel control,

    Split View pane

  2. In this stack panel firstly add the Hamburger Menu button.

    HamBurgerMenu button

  3. Once button created add the click event to handle the IsPaneOpen item (this covered in the first article),

    Code

  4. In this StackPanel add one more stack panel with Horizontal orientation below the Hamburger Menu button.

    HamBurgerMenu

  5. Add two new button inside StackPanel control.

    Add two new button

  6. Add MenuFlyout control inside the second button.

    MenuFlyout

    Note: First button available in pane closed view, when pane area is open second button visible to the user. On click the second button submenu will open.

    First button

    Submenu

    second button submenu will open

  7. Add more buttons in pane close area and repeat the same step 4. 

  8. Add submenu in pane close area perform the menu flyout concept inside the first button.

    Add submenu

    Sub Menu