Before reading this article, please go through the following article.
- Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
- 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,
- Windows 10 (Recommended)
- 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.
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.