Post
Ask Question

How To Use Menu Control In UWP

The Menu Control defines a menu of choices for users to invoke, it is inheriting from Item Control. The default ItemsPanel for the menu control is WrapPanel and it only supports MenuItem as an item\children. The Menu Control positions its items the way the WrapPanel does based on the selected orientation Vertical\Horizontal (Developers can change the control ItemsPanel). The Menu items must be of type MenuItem, and each MenuItem can be opened using keyboard or pointer.

Menu Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use Menu Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

  1. Windows 10 (Recommended)
  2. Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/ )
  3. Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the Suitable Name for your App (UWPMenu)->OK.

 

After Choosing the Target and minimum platform version for your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)) the Project creates App.xaml and MainPage.xaml.

 

Step 2

First update the reference, Microsoft.Toolkit.UWP.UI with the latest version of Manage NuGet Packages

 

Step 3

Add the following controls in design window for MenuControl feature view.

Add the Grid, TextBlock Control and change the Name and Text Property

 

Add the following 4 class file for NewProjectCommand.cs, OpenCommand.cs, copy.cs, cut.cs command execution.

Add the following namespace and code in NewProjectCommand.cs.

  1. using System.Windows.Input;  
  2. using Windows.UI.Popups;  
  3. internal class NewProjectCommand: ICommand {  
  4.     public bool CanExecute(object parameter) {  
  5.         return true;  
  6.     }  
  7.     public async void Execute(object parameter) {  
  8.         var dialog = new MessageDialog("Create New Project");  
  9.         await dialog.ShowAsync();  
  10.     }  
  11.     public event EventHandler CanExecuteChanged;  
  12. }  

 

Add the following namespace and code in OpenCommand.cs,

  1. using System.Windows.Input;  
  2. using Windows.UI.Popups;  
  3. internal class OpenCommand: ICommand {  
  4.     public bool CanExecute(object parameter) {  
  5.         return true;  
  6.     }  
  7.     public async void Execute(object parameter) {  
  8.         var dialog = new MessageDialog("Open Existing Project");  
  9.         await dialog.ShowAsync();  
  10.     }  
  11.     public event EventHandler CanExecuteChanged;  
  12. }  

 

Add the following namespace and code in copy.cs,

  1. using System.Windows.Input;  
  2. using Windows.UI.Popups;  
  3. internal class Copy: ICommand {  
  4.     public bool CanExecute(object parameter) {  
  5.         return true;  
  6.     }  
  7.     public async void Execute(object parameter) {  
  8.         var dialog = new MessageDialog("Copy content");  
  9.         await dialog.ShowAsync();  
  10.     }  
  11.     public event EventHandler CanExecuteChanged;  
  12. }  

 

Add the following namespace and code in cut.cs

  1. using System.Windows.Input;  
  2. using Windows.UI.Popups;  
  3. internal class Cut: ICommand {  
  4.     public bool CanExecute(object parameter) {  
  5.         return true;  
  6.     }  
  7.     public async void Execute(object parameter) {  
  8.         var dialog = new MessageDialog("Cut content");  
  9.         await dialog.ShowAsync();  
  10.     }  
  11.     public event EventHandler CanExecuteChanged;  
  12. }  

 

Add Page Resource for each command,

  1. <Page.Resources>  
  2.     <ResourceDictionary>  
  3.         <local:NewProjectCommand x:Key="NewProject" />  
  4.         <local:OpenCommand x:Key="OpenProject" />  
  5.         <local:Copy x:Key="Copycontent" />  
  6.         <local:Cut x:Key="Cutcontent" /> </ResourceDictionary>  
  7. </Page.Resources>  

 

Add the MenuControl with namespace and two Menu Items File and Edit with MenuFlyoutSubItem

  1. <xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" <controls:Menu AllowTooltip="False" Orientation="Horizontal" Background="#FFEDF6F7" FontFamily="Segoe UI" FlowDirection="LeftToRight" Margin="0,10,229,-2621" Grid.Row="1" Grid.RowSpan="2">  
  2.     <controls:MenuItem Name="FileMenu" controls:Menu.InputGestureText="Alt+F" Header="^File" FontSize="20" Margin="0,10,0,-10" HorizontalAlignment="Left" Width="50">  
  3.         <MenuFlyoutSubItem Text="New">  
  4.             <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+Shift+N" Text="Project" Command="{StaticResource NewProject}" /> </MenuFlyoutSubItem>  
  5.         <MenuFlyoutSeparator/>  
  6.         <MenuFlyoutSubItem Text="Open">  
  7.             <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+Shift+O" Text="OpenProject" Command="{StaticResource OpenProject}" /> </MenuFlyoutSubItem>  
  8.     </controls:MenuItem>  
  9.     </controls:Menu>  
  10.     <controls:Menu AllowTooltip="False" Orientation="Vertical" Background="#FFEDF6F7" FontFamily="Segoe UI" FlowDirection="LeftToRight" Margin="51,10,147,-7937" Grid.Row="1" Grid.RowSpan="2">  
  11.         <controls:MenuItem Name="Edit" controls:Menu.InputGestureText="Alt+E" Header="^Edit" FontSize="20" Margin="0,10,9,-10">  
  12.             <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+C" Text="Copy" Command="{StaticResource Copycontent}" />  
  13.             <MenuFlyoutSeparator/>  
  14.             <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+X" Text="Cut" Command="{StaticResource Cutcontent}" /> </controls:MenuItem>  
  15.     </controls:Menu>  

 

Note

Automatically the following code will be generated in XAML code view, while we are done in the design view.

  1. <Page x:Class="UWPMenu.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPMenu" 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" mc:Ignorable="d">  
  2.     <Page.Resources>  
  3.         <ResourceDictionary>  
  4.             <local:NewProjectCommand x:Key="NewProject" />  
  5.             <local:OpenCommand x:Key="OpenProject" />  
  6.             <local:Copy x:Key="Copycontent" />  
  7.             <local:Cut x:Key="Cutcontent" /> </ResourceDictionary>  
  8.     </Page.Resources>  
  9.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,10,1045,180">  
  10.         <Grid.RowDefinitions>  
  11.             <RowDefinition Height="auto" MinHeight="52" />  
  12.             <RowDefinition Height="auto" />  
  13.             <RowDefinition/> </Grid.RowDefinitions>  
  14.         <controls:Menu AllowTooltip="False" Orientation="Horizontal" Background="#FFEDF6F7" FontFamily="Segoe UI" FlowDirection="LeftToRight" Margin="0,10,229,-2621" Grid.Row="1" Grid.RowSpan="2">  
  15.             <controls:MenuItem Name="FileMenu" controls:Menu.InputGestureText="Alt+F" Header="^File" FontSize="20" Margin="0,10,0,-10" HorizontalAlignment="Left" Width="50">  
  16.                 <MenuFlyoutSubItem Text="New">  
  17.                     <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+Shift+N" Text="Project" Command="{StaticResource NewProject}" /> </MenuFlyoutSubItem>  
  18.                 <MenuFlyoutSeparator/>  
  19.                 <MenuFlyoutSubItem Text="Open">  
  20.                     <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+Shift+O" Text="OpenProject" Command="{StaticResource OpenProject}" /> </MenuFlyoutSubItem>  
  21.             </controls:MenuItem>  
  22.         </controls:Menu>  
  23.         <controls:Menu AllowTooltip="False" Orientation="Vertical" Background="#FFEDF6F7" FontFamily="Segoe UI" FlowDirection="LeftToRight" Margin="51,10,147,-7937" Grid.Row="1" Grid.RowSpan="2">  
  24.             <controls:MenuItem Name="Edit" controls:Menu.InputGestureText="Alt+E" Header="^Edit" FontSize="20" Margin="0,10,9,-10">  
  25.                 <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+C" Text="Copy" Command="{StaticResource Copycontent}" />  
  26.                 <MenuFlyoutSeparator/>  
  27.                 <MenuFlyoutItem controls:Menu.InputGestureText="Ctrl+X" Text="Cut" Command="{StaticResource Cutcontent}" /> </controls:MenuItem>  
  28.         </controls:Menu>  
  29.         <TextBlock x:Name="tbltitle_Copy" HorizontalAlignment="Left" Margin="37,10,0,0" Text="Menu Control in UWP" TextWrapping="Wrap" VerticalAlignment="Top" Height="42" Width="260" FontSize="24" FontWeight="Bold" FontFamily="Segoe UI" /> </Grid>  
  30. </Page>  

 

Step 4

Deploy your app in a local machine, and the output of the UWPMenu is:

 

While selecting File ->New->Project

 

After Clicking Project:

 

While selecting File ->Open->OpenProject

 

After Clicking OpenProject:

 

While selecting Edit Menu:

 

After clicking Copy:

 

After clicking Cut:

 

Summary

Now you have successfully tested Menu control in XAML and UWP environment using Visual Studio 2017.


Similar Articles