Post
Ask Question

Hamburger Menu For Windows 10 UWP App Using Community Toolkit

Windows 10 UWP Community toolkit is a collection of a helper class, custom controls and Application Services. The hamburger menu control provides an easy way to implement (hamburger menu) side-bar menu, which we can show or hide, using a hamburger button by clicking the icon and it opens up a side menu. We can use menu specific text only or images with the text.

Create a new Windows 10 UWP project or open your existing project. Right click on your project and select Manage NuGet Packages. Search for Microsoft.Toolkit.UWP.UI.Controls and install it, as shown below-

Manage NuGet Packages

This will add Microsoft.Toolkit.Uwp.UI.Controls.dll in 'References' of your project, as shown below-

Microsoft.Toolkit.Uwp.UI.Controls.dll

Add the toolkit reference in your XAML pages, using the code, given below-

XAML

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

Now, open your XAML page and write the code, given below-

  1. <Page.Resources>  
  2.     <DataTemplate x:Name="HamburDefaultTemplate">  
  3.         <Grid Width="240" Height="48">  
  4.             <Grid.ColumnDefinitions>  
  5.                 <ColumnDefinition Width="48" />  
  6.                 <ColumnDefinition /> </Grid.ColumnDefinitions>  
  7.             <SymbolIcon Grid.Column="0" Symbol="{Binding Icon}" Foreground="White" />  
  8.             <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="16" VerticalAlignment="Center" Foreground="White" /> </Grid>  
  9.     </DataTemplate>  
  10. </Page.Resources>  
  11. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  12.     <UWPToolkit:HamburgerMenu x:Name="hamburgerMenuControl" PaneBackground="Black" Foreground="White" ItemClick="OnMenuItemClick" ItemTemplate="{StaticResource HamburDefaultTemplate}" OptionsItemClick="OnMenuItemClick">  
  13.         <Frame x:Name="contentFrame" /> </UWPToolkit:HamburgerMenu>  
  14. </Grid>  
Define the data template for listing the menus. Here, I set one icon and menu name to list. Subsequently, define the HamburgerMenu and assign the itemtemplate, which we already defined in Page Resource. Define the OptionsItemClick event handler to get the selected menu. Go to the code at the backend page and write the code, given below, to assign the menu item and an event handler.
  1. public MainPage()  
  2. {  
  3.     this.InitializeComponent();  
  4.     var items = new List < MenuItem > ();  
  5.     items.Add(new MenuItem() {  
  6.         Icon = Symbol.Accept, Name = "Suresh M"  
  7.     });  
  8.     items.Add(new MenuItem() {  
  9.         Icon = Symbol.OutlineStar, Name = "Microsoft MVP"  
  10.     });  
  11.     items.Add(new MenuItem() {  
  12.         Icon = Symbol.OutlineStar, Name = "C# Corner MVP"  
  13.     });  
  14.     hamburgerMenuControl.ItemsSource = items;  
  15. }  
  16. public class MenuItem {  
  17.     public Symbol Icon {  
  18.         get;  
  19.         set;  
  20.     }  
  21.     public string Name {  
  22.         get;  
  23.         set;  
  24.     }  
  25. }  
  26. private void OnMenuItemClick(object sender, ItemClickEventArgs e) {  
  27.     //process selected menu item  
  28. }  
Now, run the app and check the output looks like the following image-

output

output

For more details on developing Windows 10 UWP App, refer to my e-book, whose link is given below-


Similar Articles