Different tap events for SfListView items

[bkind]

Hi,

I have list items in a SfListView which have a grid layout, one column has two cells with buttons or images (call it action buttons), other columns have labels or images. These action buttons are meant to start specific actions (sic) on an item.

Is it possible to have

• tapped events for these action buttons - which of course are not the SfListView's item tapped events, while
• the SfListView's item (single, double etc.) tapped events are triggerd when an item is tapped apart from the action buttons

so that I'ld have in fact e.g. three differnt tapped events depending on where the item as been tapped? And how could that be realized?

Kind regards

[Dinesh Babu Yadav]

Hi Kind, 

 

Thank you for using Syncfusion Products. 

 

You can achieve the reported requirement by adding the different gesture recognizer for each element in Xamarin Forms such as image, label etc.., and hook the tapped event as like below code example and by using NumberOfTapsRequired property you can define when the event need to be raised. Please refer the following UG documentation link for more reference about working with gesture recognizers in Xamarin Forms. 

 

UG Link for different gesture recognizer: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/  

UG Link for Tap gesture recognizer: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/tap/  

 

Code Example[XAML]: 

<listView:SfListView.ItemTemplate> 

  <DataTemplate> 

    <Grid x:Name="grid" RowSpacing="1">                               

     <Grid RowSpacing="1"> 

       <Image Source="{Binding ContactImage}" HeightRequest="50" 

              VerticalOptions="Center"> 

         <Image.GestureRecognizers> 

           <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 

         </Image.GestureRecognizers> 

       </Image> 

 

       <Grid Grid.Column="1"> 

         <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" 

                Text="{Binding ContactName}"> 

           <Label.GestureRecognizers> 

             <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/> 

           </Label.GestureRecognizers> 

         </Label> 

… 

     </Grid> 

  </DataTemplate> 

</listView:SfListView.ItemTemplate> 

 

For your reference, we have attached the sample with the above code example and you can download it from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/135311/ze/Sample1564870137  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

 

[Anthony]

This doesn't work when using MVVM, in particular Prism.

See below....i get no compile errors but event never fires...i get this error as

[0:] Binding: 'SelectFavCommand' property not found on 'etech.Models.ClientModel', target property: 'Xamarin.Forms.TapGestureRecognizer.Command'

Why is it looking for SelectFavCommand in etech.Models.ClientModel instead of  etech.zspotter.ViewModels

xaml pager herader is

    x:Class="etech.zspotter.Views.Clients"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:behaviors="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
    xmlns:converts="clr-namespace:etech.zspotter"
    xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
    xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
    Title="Clients"
    prism:ViewModelLocator.AutowireViewModel="True">

                <sync:SfListView.LeftSwipeTemplate>
                    <DataTemplate x:Name="LeftSwipeTemplate1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid
                                Grid.Column="0"
                                BackgroundColor="#009EDA"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill">
                                <Grid HorizontalOptions="Center" VerticalOptions="Center">
                                    <Image
                                        Grid.Row="0"
                                        Grid.Column="0"
                                        BackgroundColor="Transparent"
                                        HeightRequest="35"
                                        Source="Favorites.png"
                                        WidthRequest="35">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding SelectFavCommand}" NumberOfTapsRequired="2" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                </Grid>
                            </Grid>
                            <Grid
                                Grid.Column="1"
                                BackgroundColor="#009EDA"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill">
                                <Grid HorizontalOptions="Center" VerticalOptions="Center">
                                    <Image
                                        Grid.Row="0"
                                        Grid.Column="0"
                                        BackgroundColor="Transparent"
                                        HeightRequest="35"
                                        Source="Delete.png"
                                        WidthRequest="35" />
                                </Grid>

                            </Grid>
                            <Grid
                                Grid.Column="2"
                                BackgroundColor="#009EDA"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill">
                                <Grid HorizontalOptions="Center" VerticalOptions="Center">
                                    <Image
                                        Grid.Row="0"
                                        Grid.Column="0"
                                        BackgroundColor="Transparent"
                                        HeightRequest="35"
                                        Source="site.png"
                                        WidthRequest="35" />
                                </Grid>

                            </Grid>
                        </Grid>
                    </DataTemplate>
                </sync:SfListView.LeftSwipeTemplate>

[Anthony]

any assistance?

[Dinesh Babu Yadav]

Hi Anthony, 

 

Thank you for using Syncfusion Products.  

 

We would like to let you know that the binding context of each list view item in the ItemTemplate or LeftSwipeTemplate property would be the respective data model and so, when the command in ViewModel which is bind to list view item does not triggered on tapping the image. However, you can overcome this, by defining the respective Source property in the Command as like below code example.  

 

Code Example[XAML]:  

 

 

<sync:SfListView.LeftSwipeTemplate>
    <DataTemplate x:Name="LeftSwipeTemplate1">
        <Grid HorizontalOptions="Center" VerticalOptions="Center">
            <Image BackgroundColor="Transparent" HeightRequest="35" Source="Favorites.png" WidthRequest="35">
                <Image.GestureRecognizers> 

                    <TapGestureRecognizer Command="{Binding BindingContext.ImageCommand, Source={x:Reference Name=listView}}" /> 

                </Image.GestureRecognizers>
            </Image>
        </Grid> 

    </DataTemplate>
</sync:SfListView.LeftSwipeTemplate> 

 

 

For your reference, we have attached the sample in which tapped command in ViewModel gets triggered on tapping the nested list view item and you can download it from the below link.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/3.Swiping683270447  

 

Kindly let us know if you require further assistance.   

 

Regards, 

Yuvaraj Chandrasekaran