ContextMenu In Xamarin.Forms Application

Introduction

In this article, we will see how to add a context menu on the list view having cell items in Xamarin.Forms application. We are going to add a list of names. Clicking on any item in that list will open the context menu for various actions like 'add', 'delete', 'edit' etc.

Implementation

Open Visual Studio and select a New Project.

Xamarin

Select project type and give the project a name.

Xamarin

Select the template as Blank App and code sharing as PCL.

Xamarin

Set the target and minimum platform versions for your application.

Xamarin

Set the below configuration.

Xamarin

Open MainPage.xaml from Portable project and modify the content as below.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:ContextMenu"  
  5.              x:Class="ContextMenu.MainPage" BackgroundColor="Cyan">  
  6.     <StackLayout>  
  7.         <Label Text="Name list" FontSize="40" TextColor="Maroon"></Label>  
  8.         <ListView x:Name="MainListView" HasUnevenRows="True">  
  9.             <ListView.ItemTemplate>  
  10.                 <DataTemplate>  
  11.                     <ViewCell>  
  12.                         <ViewCell.ContextActions>  
  13.                             <MenuItem Text="Add" Clicked="Add_Clicked"></MenuItem>  
  14.                             <MenuItem Text="Delete" Clicked="Delete_Clicked"></MenuItem>  
  15.                             <MenuItem Text="Edit" Clicked="Edit_Clicked"></MenuItem>  
  16.                         </ViewCell.ContextActions>  
  17.                         <Grid>  
  18.                             <Label TextColor="Navy" Text="{Binding .}" FontSize="25"></Label>  
  19.                         </Grid>  
  20.                     </ViewCell>  
  21.                 </DataTemplate>  
  22.             </ListView.ItemTemplate>  
  23.         </ListView>  
  24.     </StackLayout>  
  25. </ContentPage>  

Open MainPage.xaml.cs and modify the content as below.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace ContextMenu  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.             MainListView.ItemsSource = new List<string>  
  16.             {  
  17.                  "Irshad""Imran""Irfan""Salman""Aamir"  
  18.             };  
  19.         }  
  20.   
  21.         private void Add_Clicked(object sender, EventArgs e)  
  22.         {  
  23.             var menuitem = sender as MenuItem;  
  24.             if (menuitem != null)  
  25.             {  
  26.                 var name = menuitem.BindingContext as string;  
  27.                 DisplayAlert("Alert""Add " + name, "Ok");  
  28.             }  
  29.         }  
  30.   
  31.         private void Delete_Clicked(object sender, EventArgs e)  
  32.         {  
  33.             var menuitem = sender as MenuItem;  
  34.             if (menuitem != null)  
  35.             {  
  36.                 var name = menuitem.BindingContext as string;  
  37.                 DisplayAlert("Alert""Delete " + name, "Ok");  
  38.             }  
  39.         }  
  40.   
  41.         private void Edit_Clicked(object sender, EventArgs e)  
  42.         {  
  43.             var menuitem = sender as MenuItem;  
  44.             if (menuitem != null)  
  45.             {  
  46.                 var name = menuitem.BindingContext as string;  
  47.                 DisplayAlert("Alert""Edit " + name, "Ok");  
  48.             }  
  49.         }  
  50.     }  
  51. }  

Note

Create a new project, for, I have attached only Portable project in this article.

Run the application. You will get the following output.

Xamarin

Xamarin

Right-click on any name from the given list and you will have the following context menu. 

Click on any menu, suppose “Delete”. The corresponding event will be executed.

Xamarin

This way, you can build the context menu with defined command actions. You can also define the different actions that need to be bound for the menu options. The updation of the menu items at the execution time depends on the condition.

You can check the same output in Android Emulator also.


Similar Articles