Articles in this section
Category / Section

How to perform the right-click action in the listview in Xamarin.Forms UWP platform?

1 min read

ListView allows you perform the right-click action in UWP platform by customizing the ListView and ListViewItem.

Click here to know more details about customization of listview item.

xaml

<ContentPage xmlns:local="clr-namespace:ListViewContextMenu">
    <local:SfListViewExt x:Name="listView" ItemsSource="{Binding ContactsInfo}">
        <local:SfListViewExt.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Source="{Binding ContactImage}"/>
                    <Label Text="{Binding ContactName}"/>
                    <Label Text="{Binding ContactNumber}"/>
                    <Label Text="{Binding ContactType}"/>
                </Grid>
            </DataTemplate>
        </local:SfListViewExt.ItemTemplate>
        <local:SfPopUpView IsVisible="{Binding ShowPopUp, Mode=TwoWay}"
                           ListView="{x:Reference listView}"/>
    </local:SfListViewExt>
</ContentPage>

 

C#

Extension class of SfListView and RightTappedEventArgs

public class SfListViewExt : SfListView
{
    public event ItemRightTappedEventHandler ItemRightTapped;
    public void RaiseItemRightTapped(ItemRightTappedEventArgs e)
    {
        if (ItemRightTapped != null)
            this.ItemRightTapped(this, e);
    }
}
 
public delegate void ItemRightTappedEventHandler(object sender, ItemRightTappedEventArgs e);
 
public class ItemRightTappedEventArgs : EventArgs
{
    private object itemData = null;
    private Point position;
    public ItemRightTappedEventArgs(object itemData, Point position)
    {
        this.itemData = itemData;
        this.position = position;
    }
    public object ItemData
    {
        get { return itemData; }
    }
    public Point Position
    {
        get { return position; }
    }
}

 

Extend the ItemRenderer in the UWP renderer project, raise the right tapped event, and then pass the data and position into the pcl.

public class ListViewItemRendererExt : ListViewItemRenderer
{
    public ListViewItemRendererExt()
    {
        this.RightTapped += ListViewItemRendererExt_RightTapped;
    }
 
    private void ListViewItemRendererExt_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedRoutedEventArgs e)
    {
        var listviewitem = this.Element as ListViewItemExt;
        if (listviewitem != null)
        {
            var location = this.TransformToVisual(null).TransformPoint(e.GetPosition(this));
            var tappedEventArgs = new ItemRightTappedEventArgs(this.Element.BindingContext, new Xamarin.Forms.Point(location.X, location.Y));
            listviewitem.ListView.RaiseItemRightTapped(tappedEventArgs);
        }
    }
}

 

Show popup when right-click the mouse.

listview.ItemRightTapped += Listview_ItemRightTapped;
 
private void Listview_ItemRightTapped(object sender, ItemRightTappedEventArgs e)
{
    item = e.ItemData as Contacts;
    this.ShowPopup(e.Position.X, e.Position.Y);
}

 

Sample: Right click action in UWP

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied