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.

Select project type and give the project a name.



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

Set the target and minimum platform versions for your application.



Set the below configuration.



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.

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.



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.