Hamburger Menu In UWP With XAML And C#

Before reading this article, please go through the following article.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
   
2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

The hamburger menu is used for navigation. It supports three-tier navigation, filled with drop-downs, social icons, search bars, and utility links.

Reading this article, you can learn about UWP Tool Kit Control – Hamburger Menu in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project -> select Universal (under Visual C# -> Windows) -> Blank App -> give it a suitable name (UWP Hamburger Menu) -> OK.

  

Step 2 - Choose the Target and Minimum platform version that your UWP application will support. After, the Project creates App.xaml and MainPage.xaml.

  

For adding UWPToolKit Control, please refer.

• How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3 - Add TextBlock control and change the Name and Text property for title.

  

Step 4 - Add images in the Assets folder, and images for Hamburger Menu.

  

Step 5 - Add the following XAML code for creating Local Resource for adding menu items, used to add Hamburger Menu control,

<Page.Resources>
    <DataTemplate x:Name="HamburDefaultTemplate">
        <Grid Width="240" Height="48">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="48" /> </Grid.ColumnDefinitions>
            <SymbolIcon Grid.Column="0" Symbol="{Binding Icon}" Foreground="White" />
            <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="16" VerticalAlignment="Center" Foreground="White" /> </Grid>
    </DataTemplate>
</Page.Resources>

  
Step 6 - Add UWP Tool Kit Name Space in Mainpage.xaml,

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add Hamburger Menu control from UWP Tool Kit and Change the name property,


Step 7 - Add a frame inside Hamburger Menu,

  

Step 8 - Set the Item template for Hamburger Menu.

  

Step 9 - Create an Item_click event for Hamburger Menu.

  

Step 10 - Add Relative Panel for displaying image,

  

Note - Automatically, the following code will be generated in XAML code View when we are done in the design View.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPHamburgerMenu" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPHamburgerMenu.MainPage" mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Name="HamburDefaultTemplate">
            <Grid Width="240" Height="48">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition /> </Grid.ColumnDefinitions>
                <SymbolIcon Grid.Column="0" Symbol="{Binding Icon}" Foreground="White" />
                <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="16" VerticalAlignment="Center" Foreground="White" /> </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="222,34,0,0" TextWrapping="Wrap" Text="Hamburger Control Test" VerticalAlignment="Top" FontWeight="Bold" FontSize="18" />
        <Controls:HamburgerMenu x:Name="HBMTest" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Top" ItemTemplate="{StaticResource HamburDefaultTemplate}" ItemClick="HBMTest_ItemClick" PaneBackground="Black" Foreground="White">
            <Frame x:Name="contentFrame" Margin="0,0,61,0" /> </Controls:HamburgerMenu>
        <RelativePanel x:Name="RPHUMImage" Margin="222,66,0,0" /> </Grid>
</Page>

Step 11 - Add namespace and the following code in MainPage.xaml.cs,

using Windows.UI.Xaml.Media.Imaging;
public class HMenuItem {
    public Symbol Icon {
        get;
        set;
    }
    public string Name {
        get;
        set;
    }
}
public sealed partial class MainPage: Page {
        public MainPage() {
            this.InitializeComponent();
            var items = new List < HMenuItem > ();
            items.Add(new HMenuItem() {
                Icon = Symbol.Accept,
                    Name = "UWP"
            });
            items.Add(new HMenuItem() {
                Icon = Symbol.Accept,
                    Name = "Azure"
            });
            items.Add(new HMenuItem() {
                Icon = Symbol.Accept,
                    Name = "IoT"
            });
            items.Add(new HMenuItem() {
                Icon = Symbol.Accept,
                    Name = "Holo Lens"
            });
            HBMTest.ItemsSource = items;
        }
        private void HBMTest_ItemClick(object sender, ItemClickEventArgs e) {
            var menuItem = e.ClickedItem as HMenuItem;
            string s = menuItem.Name;
            ImageBrush myBrush = new ImageBrush();
            Image image = new Image();
            if (s == "UWP") {
                image.Source = new BitmapImage(new Uri("ms-appx:///Assets//01.png"));
                myBrush.ImageSource = image.Source;
                RPHUMImage.Background = myBrush;
            } else if (s == "Azure") {
                image.Source = new BitmapImage(new Uri("ms-appx:///Assets//02.png"));
                myBrush.ImageSource = image.Source;
                RPHUMImage.Background = myBrush;
            } else if (s == "IoT") {
                image.Source = new BitmapImage(new Uri("ms-appx:///Assets//03.jpg"));
                myBrush.ImageSource = image.Source;
                RPHUMImage.Background = myBrush;
            } else if (s == "Holo Lens") {
                image.Source = new BitmapImage(new Uri("ms-appx:///Assets//04.png"));
                myBrush.ImageSource = image.Source;
                RPHUMImage.Background = myBrush;
            }
        }

Step 12 - Deploy of your app in Local Machine. The output of the Hamburger Menu App is the following.

  

After clicking Hamburger Menu icon,

  


  

Summary - Now, you have successfully tested UWP Tool Kit - Hamburger MenuControl in Visual C# - UWP environment.