ContextMenu In Xamarin.Forms Application

Mohammad Irshad

8y48.1k7100Article

7 Comments

Join the conversation! Your thoughts help the community grow.

Mounika Bandaru5y ago
Hi Mohammad, how can I add image to the MenuItems
compcos compcos7y ago
Hi Mohammad. I tried this solution and it works, but my issue is that I have white as the foreground of the items in the list. When context menu appears on Android, the background of the selected list item is set to white, so the user can not see the item anymore. Can I change the background of the selected item when contextmenu appears?
- Mohammad Irshad7y ago
  You can try it out by changing the color based on condition.
Ayappan Alagesan8y ago
Hi Sir, I am new to Xamarin , I need a button which has a dropdown list..
- Mohammad Irshad8y ago
  Try using picker control.
sachin saini8y ago
How can I achieve this in MVVM?
- Mohammad Irshad8y ago
  Http://www.c-sharpcorner.com/article/mvvm-lite-for-data-binding-in-xamarin-form/

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.

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.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ContextMenu"
x:Class="ContextMenu.MainPage" BackgroundColor="Cyan">
<StackLayout>
<Label Text="Name list" FontSize="40" TextColor="Maroon"></Label>
<ListView x:Name="MainListView" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Add" Clicked="Add_Clicked"></MenuItem>
<MenuItem Text="Delete" Clicked="Delete_Clicked"></MenuItem>
<MenuItem Text="Edit" Clicked="Edit_Clicked"></MenuItem>
</ViewCell.ContextActions>
<Grid>
<Label TextColor="Navy" Text="{Binding .}" FontSize="25"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace ContextMenu
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
MainListView.ItemsSource = new List<string>
{
"Irshad", "Imran", "Irfan", "Salman", "Aamir"
};
}
private void Add_Clicked(object sender, EventArgs e)
{
var menuitem = sender as MenuItem;
if (menuitem != null)
{
var name = menuitem.BindingContext as string;
DisplayAlert("Alert", "Add " + name, "Ok");
}
}
private void Delete_Clicked(object sender, EventArgs e)
{
var menuitem = sender as MenuItem;
if (menuitem != null)
{
var name = menuitem.BindingContext as string;
DisplayAlert("Alert", "Delete " + name, "Ok");
}
}
private void Edit_Clicked(object sender, EventArgs e)
{
var menuitem = sender as MenuItem;
if (menuitem != null)
{
var name = menuitem.BindingContext as string;
DisplayAlert("Alert", "Edit " + name, "Ok");
}
}
}
}

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.