How To Create Context Menu Using List View And MenuFlyout Controls In Universal Application Development With XAML And C#

Before reading this article, please go through the article's link, given below- 

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn, how to Create Context Menu, using List View and MenuFlyout controls in Universal Windows apps development with XAML and Visual C#.

The following important tools are required to 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.

Step1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the suitable name for your app (UWPContextMenu) ->OK.

New Project

Step 2 - Choose Target and minimum platform version your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

version

Step 3 - Open (double click) the file MainPage.xaml in the Solution Explorer and click Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls and drag the required control to the middle of the design canvas

Add TextBlock control and change the name and text property

TextBlock

Subsequently, change the Textblock font size.

TextBlock

Afterwards, drag and drop the List View control. You have to change the name property.

List View control

Now, you can add the items for List view Control. The item type is String and to add string item, first you have to select other type and select the String object.

add the items

Now, you have added 4 string items and given the property name also.

string

Now, your List View looks like:

List View

Step 4 - Next, you can add the Menu Flyout Control, give the Key and define with ListView control.

Menu Flyout Control

Now, set the name property of the MenuFlyout control.

MenuFlyout Control

Add 2 Items for Menuflyout.

Menuflyout

Change the name and text Property for MenuFlyoutItem.

Menuflyout

Step 5 - Add an event method for RightTapped (just double click the event method in property Window, automatically the LVContextM_RightTapped() event method will generate in MainPage.Xaml.cs).

Add an event method

The code, given below, will be be added in the LVContextM_RightTapped to add feature for Sub menu.

  1. ListView listView = (ListView)sender;  
  2. MenuFlyoutContext.ShowAt(listView, e.GetPosition(listView));  
  3. var a = ((FrameworkElement)e.OriginalSource).DataContext;  
code

Add a textblock control to display for which menu is clicked (Sub menu 1 or Sub Menu 2).

textblock

Add click Event Methods, when the sub menu is clicked (Automatically event method will Generate in MainPage.Xaml.cs).

code

Add the code for Submenuclick Event.

Submenuclick

Note: Automatically, the code, given below, will be generated in XAML code view, while we are done in the design view-
  1. <Page x:Class="UWPContextMenu.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPContextMenu" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="71,47,0,0" TextWrapping="Wrap" Text="Context Menu Test" VerticalAlignment="Top" Height="44" Width="231" FontSize="24" FontWeight="Bold" />  
  4.         <ListView x:Name="LVContextM" HorizontalAlignment="Left" Height="184" Margin="105,96,0,0" VerticalAlignment="Top" Width="197" RightTapped="LVContextM_RightTapped">  
  5.             <ListView.Resources>  
  6.                 <MenuFlyout x:Name="MenuFlyoutContext" x:Key="FlyoutBaseKey">  
  7.                     <MenuFlyoutItem x:Name="MFISubMenu1" Text="Sub Menu1" Click="MFISubMenu1_Click" />  
  8.                     <MenuFlyoutItem x:Name="MFISubmenu2" Text="Sub Menu 2" Click="MFISubmenu2_Click" /> </MenuFlyout>  
  9.             </ListView.Resources>  
  10.             <FlyoutBase.AttachedFlyout>  
  11.                 <StaticResource ResourceKey="FlyoutBaseKey" /> </FlyoutBase.AttachedFlyout>  
  12.             <x:String>Context Menu Item 1</x:String>  
  13.             <x:String>Context Menu Item 2</x:String>  
  14.             <x:String>Context Menu Item 3</x:String>  
  15.             <x:String>Context Menu Item 4</x:String>  
  16.         </ListView>  
  17.         <TextBlock x:Name="tblDisplay" HorizontalAlignment="Left" Margin="71,325,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="25" Width="231" /> </Grid>  
  18. </Page>  
Step 6 - Deploy your app in the local machine and the output of the UWPContextMenu app is given below-

Deploy

Summary

Now, you have successfully created and tested your Context Menu, using List View and ManuFlyout Controls in Visual C# - UWP environment.