Hamburger menu/button is a simple navigation design which we can see in most modern app platforms. And finally we have it on Windows 10 apps. In most of the default Windows 10 apps Microsoft has used this navigation pattern and also recommends it to the developers. The following images are the default Windows 10 weather app’s screenshots. (1st one with the hamburger menu collapsed and 2nd one with the menu opened.) Implementing this navigation pattern is pretty simple. We will use the ‘Split View’ control which is a pre-built control in the Windows 10 SDK. Split View Control This is an xaml user control with a pane and a content area. We use this pane area to implement our hamburger menu. This pane has four display modes.
Implementing the Hamburger Navigation Step 1: Firstly, create a new universal windows project. Add a SplitView control to the main grid, a new grid to the pane of our SplitView and a button to the grid we created. This button is our Ham button . We will use “Segoe MDL2 Assets” font to use new symbols in Windows 10. You can find these in the character map. Next add a ListBox or a LisView control to our grid in the pane. This list view is the item container for our page buttons. We will use an item template to our page items. We can also just use a label and a button to do this. But when using an item template it’s easy to handle and its nice and clean XAML code. So create an item template to our ListView. Xaml will look like the following, txtSymbol is the textblock where we will show our symbol. txtContent is the textblock where we will show the name. Now we must add our content area for our SplitView. Add these lines inside the SplitView tags in your XAML code. We are using a frame to navigate within the pages. Step 2 Add 2 new pages to your project and name those “Page1” and “Page2”. Now add a click event to the hamburger button and add these lines to it. This code will handle the opening and closing of our SplitView. Now add a new class named “Scenario”. Edit the code so it will look like the following, Scenario is an object we use to handle a one page. We have 2 pages so we need 2 scenarios. Now add the following lines to the MainPage() method in MainPage.xaml.cs . Now we must add an event handler to the SelectionChanged event of our ListView . Add the following code inside it. That’s all. Now build the project and run it and see .
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members: