Articles in this section
Category / Section

How to handle touch interaction using MR.Gesture in Xamarin.Forms ListView (SfListView)

1 min read

You can load Xamrin.Forms SfListView inside Mr.Gesture’s page and use Gesture commands to handle touch.

Step 1: Install the Mr.Gesture Nuget package in the shared code project.

Step 2: Create your Xaml page by inheriting Mr.Gesture.ContentPage.

namespace ListViewXamarin
    public partial class MainPage : MR.Gestures.ContentPage
        public MainPage()

Step 3: Create command in the ViewModel class and handle the touch in the command execute method.

namespace ListViewXamarin
    public class ContactsViewModel
        public Command<object> MrGestureTapCommand { get; set; }
        public ContactsViewModel()
            MrGestureTapCommand = new Command<object>(OnMrGestureCommandTapped);
        private void OnMrGestureCommandTapped(object obj)
            var tappedItem = obj as Contacts;
            App.Current.MainPage.DisplayAlert("Mr.Gesture tapped", tappedItem.ContactName + " tapped", "Ok");

Step 4: Add ListView to the content of the page. Add Mr.Gesture.Grid to the ItemTemplate of SfListView and bind ViewModel command to TappedCommand of Mr.Gesture.Grid.

<mr:ContentPage xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
            <syncfusion:SfListView x:Name="listView"
                                   ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                        <mr:Grid TappedCommand="{Binding Path=BindingContext.MrGestureTapCommand, Source={x:Reference listView}}" TappedCommandParameter="{Binding .}">
                                    <ColumnDefinition Width="70" />
                                    <ColumnDefinition Width="*" />
                                <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>

View sample in GitHub

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