Introduction

Open Visual Studio and click New Project. Create a new blank Windows Application. Give it a name and click OK.
Class liberary

Build your first Hamburger Menu in Windows 10 Split View

Open up your MainPage.xaml file and make the following changes,
  1. <Page x:Class="Hamburger.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Hamburger" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
  2. <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
  3. <SplitView.Pane>
  4. <StackPanel Background="Aqua">
  5. <!--Inside of our stack panel, I want to add our hamburger button, and below that a couple of dummy buttons just for reference.-->
  6. <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
  7. <StackPanel Orientation="Horizontal">
  8. <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
  9. <TextBlock Text="Home" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Right" /> </StackPanel>
  10. <StackPanel Orientation="Horizontal">
  11. <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
  12. <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Right" /> </StackPanel>
  13. <StackPanel Orientation="Horizontal">
  14. <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
  15. <TextBlock Text="Messages" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Right" /> </StackPanel>
  16. <StackPanel Orientation="Horizontal">
  17. <Button x:Name="MenuButton4" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
  18. <TextBlock Text="Contact" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Right" /> </StackPanel>
  19. </StackPanel>
  20. </SplitView.Pane>
  22. <SplitView.Content>
  23. <Grid Background="Azure">
  24. <TextBlock Text="Hamburger Menu" FontSize="54" Foreground="Purple" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
  25. </SplitView.Content>
  26. </SplitView>
  27. </Page>
The final step is to add the logic to our Hamburger Button to open and close the menu. Go and open up the MainPage.xamlL.cs. And make the following changes.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System. Linq;
  5. using System.Runtime.InteropServices.WindowsRuntime;
  6. using Windows. Foundation;
  7. using Windows.Foundation.Collections;
  8. using Windows.UI.Xaml;
  9. using Windows.UI.Xaml.Controls;
  10. using Windows.UI.Xaml.Controls.Primitives;
  11. using Windows.UI.Xaml.Data;
  12. using Windows.UI.Xaml.Input;
  13. using Windows.UI.Xaml.Media;
  14. using Windows.UI.Xaml.Navigation;
  16. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
  17. namespace Hamburger
  18. {
  19. /// <summary>
  20. /// An empty page that can be used on its own or navigated to within a Frame.
  21. /// </summary>
  22. public sealed partial class MainPage: Page
  23. {
  24. public MainPage()
  25. {
  26. this.InitializeComponent();
  27. }
  28. private void HamburgerButton_Click(object sender, RoutedEventArgs e)
  29. {
  30. MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
  31. }
  32. }
  33. }
Press CTRL+F5 to run the project.
run the project
Hamburger

SplitView Control

The SplitView control has an expandable pane and a content area.
SplitView has two main elements, the pane, and the content. The pane represents the menu that you want to interact with and the content represents the main content of your page.
The pane and content areas divide the available screen.
The pane is always visible in this mode that is just wide enough to show icons.
Please leave feedback on how you liked this tutorial and what we could improve.
You can find more samples at https://github.com/.

Summary

In this article, we learned about build your first hamburger menu in Windows 10.