Use Hamburger Menu In UWP Application

Here are the steps:

Step 1: Create a new Universal Windows Project and name it whatever you want.

Step 2:

Now go to the MainPage.xaml and define your rows in the Grid by using Grid.RowDefination and assign a height to these rows. In our case we have created two rows of Height auto and *.

<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

Step 3:

Once you've done with your rows add splitview in your app by using SplitView and the following lines of code. The first row in which you define height property to auto is for RelativePanel and hamburger button and the next row is for the listbox and listboxitems.

Here's the code for that,

<RelativePanel>
<Button Width="60" Height="45" Name="hamburgerbtn" Click="hamburgerbtn_Click" FontFamily="Segoe MDL2 Assets" Content="" Margin="0,30,0,0"></Button>
</RelativePanel>
<SplitView Grid.Row="1" Name="mysplitview1" DisplayMode="CompactOverlay" OpenPaneLength="300" CompactPaneLength="60">
<SplitView.Pane>
<ListBox>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="45" FontFamily="Segoe MDL2 Assets" Text=""></TextBlock>
<TextBlock Margin="30,0,0,0" FontSize="25" Text="Search something"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="45" FontFamily="Segoe MDL2 Assets" Text=""></TextBlock>
<TextBlock Margin="30,0,0,0" FontSize="25" Text="Record something"></TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
</SplitView>

Notice that you don't need to add some additional hamburger images in your Assets because in Visual Studio 2015 you just add your icon code by going into windows start and and enter character map the windows 10 Cortana opens it for you. Now what you need you just go to the font Segoe MDL2 Assets and find your icon whatever you want and paste this code in your xaml editor of visual studio 2015.

Step 4 :

Now we move to some backend c-sharp code for achieving better functionality. So behind the button add some code in button click event handler of Mainpage.xaml.cs i.e.,

private void hamburgerbtn_Click(object sender, RoutedEventArgs e)
{
mysplitview1.IsPaneOpen = !mysplitview1.IsPaneOpen;
}

Step 5 :

Save all and run your project by just pressing F5.

A splash screen will open up after this your hamburger menu or simply called split view is open. You can check or open your listitems by pressing the hamburger button.

8 Comments

Join the conversation! Your thoughts help the community grow.

Markus Erhardt7y ago
Hello, is there a way to throw the Icon away with the three bars and put my icons instead?
Ehsan Sajjad10y ago
Nice one
Mohammed Ibrahim10y ago
nice
Santhakumar Munuswamy10y ago
Thanks for nice article
Hemant Srivastava10y ago
Is "Three lines" menu called Hamburger menu?
- Asfend Yar10y ago
  It has different names in UWP it's hamburger and you can also call it a split view
Sibeesh Venu10y ago
Nice Share
Ammar Shaukat10y ago
Good