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()
        {
            InitializeComponent();
        }
    }
}

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"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <mr:ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </mr:ContentPage.BindingContext>
 
    <mr:ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView"
                                   ItemSpacing="1" 
                                   ItemSize="60"
                                   ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <mr:Grid TappedCommand="{Binding Path=BindingContext.MrGestureTapCommand, Source={x:Reference listView}}" TappedCommandParameter="{Binding .}">
                                <mr:Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70" />
                                    <ColumnDefinition Width="*" />
                                </mr:Grid.ColumnDefinitions>
                                <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}"/>
                                </Grid>
                        </mr:Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </mr:ContentPage.Content>
</mr:ContentPage>

View sample in GitHub

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