Universal Windows Platform Hamburger menu navigation

A lot of UWP apps use the hamburger menu for page navigation, so I made a sample app.

pc2

Since Windows.UI.Xaml.Controls.Page is a UserControl the idea is to just replace the content of the MainPage instead of really navigate through pages.

I encountered some problems:

I solved these problems by creating a BasePage class with properties to set transitions and exposing new navigation events. The NavigationCacheMode is managed by the code.

Sadly NavigationEventArgs cannot be inherited (it’s a sealed class) and has no constructor so I had to use my own class.

The example app has some pages to navigate through and uses different transitions. The app runs correctly on the PC and on the phone.

To change the menu appearence on mobile I used the VisualStateManager: on mobile (but also on pc if you resize the window to less than 720 pixels) the menu is totally closed and a little larger when opened.

Here are some screenshots:

The app looks good also using the dark theme

I made a simple control for the menu item and in the MainPage there’s the standard SplitView. To let the code open the correct page and select the menu item you need to put in the ActionName the page’s class name.

Pages must inherit from the BasePage class but are normal pages for the rest.

All the “dirty” work is done in App.cs (back stack, page cache, show/hide the back button, manage the back button event).

 

You can download the source code here.

If you have advice, ideas, better solutions feel free to leave a comment.

Have fun. 😉

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.