The HamburgerMenu control in the UWP Community Toolkit sample has an ineteresting way or using narrow and wide states. It allow us to have a hamburger menu when the app is in narrow mode or have the navigation at the top when we are in the wide mode, this is what we are going to reproduce.
This is when you are in wide mode:
This is when you are in Narrow mode:
And that is what we are going to setup in this tutorial!
Lets start, first we need create a page called Shell.xaml/.cs this will be our shell of our application.
Next we will create a HamburgerMenu control that we will named x:Name="HamburgerMenu" inside the HamburgerMenu tag we will add a VisualStateManager which will allow us to change between the Narrow and Wide States of the app. Depending on which state we are in we will need to change the style and the ItemTample of the HamburgerMenu.
For this page we will add 2 DataTemplates :
Next we will need to set the different styles for the HamburgerMenu which you can find here, most of these style were taken from the sample UWP app of the toolkit and reworked to fit our needs you can check it out here.
In our Shell.xaml.cs file we will add 3 properties:
So that we can acces the shell from anywhere in the application.
To load the different view that should be accessible in the nav bar.
Next we need to work on the OnNavigatedTo method, here we are going to want to populate our NavigationViews property and bind it to our HamburgerMenu as follows:
You should have something like this in the end:
Next we will what to handle the NavigationFrame_Navigating this will allow us to make sure that the correct tab is selected deepending on which tab we click, tap, etc
and there you have it =), have fun paying around with the demo app.
Full Source code of the app here.