Tap on element inside SfListView DataTemplate

[Biermeister]

Each row of my SfListView DataTemplate contains text and two images (working like buttons), for "edit" and "delete" actions. My code for each image:

      HorizontalOptions="EndAndExpand"

      VerticalOptions="Center"

      Aspect="AspectFill"                                

      Source="{Binding Active Converter={local:BoolToSwitchConverter}}">

                               

                                   

                                        Command="{Binding EditItemTappedCommand}"

                                        NumberOfTapsRequired="1" />

                               

     

When I tap on them nothing happens. What am I doing wrong?

SIGN IN To post a reply.

8 Replies Oldest first

---

BI Biermeister March 2, 2018 12:21 PM UTC

<ffimageloading:CachedImage 

      HorizontalOptions="EndAndExpand"

      VerticalOptions="Center"

      Aspect="AspectFill"                                

      Source="{Binding Active, Converter={local:BoolToSwitchConverter}}">

 

      <ffimageloading:CachedImage.GestureRecognizers>

          <TapGestureRecognizer

              Command="{Binding EditItemTappedCommand}"

              NumberOfTapsRequired="1" />

      </ffimageloading:CachedImage.GestureRecognizers>

 

</ffimageloading:CachedImage>

---

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 5, 2018 12:57 PM UTC

Hi Amador, 

 

We have checked the reported query “Image.TapGesture does not work inside SfListView” from our side. We would like to let you know that when using Command for elements inside the ItemTemplate of SfListView, you need to pass the reference of SfListView to gesture as like below code example. 

 

Code Example[XAML]: 

<listView:SfListView x:Name="listView" ItemsSource="{Binding contactsinfo}" ItemSpacing="0,0,5,0"> 

<listView:SfListView.ItemTemplate> 

                    <DataTemplate> 

                        <ViewCell> 

                            <ViewCell.View>
<ffimageloading:CachedImage  

 

      HorizontalOptions="EndAndExpand" 

 

      VerticalOptions="Center" 

 

      Aspect="AspectFill"                                 

 

      Source="{Binding Active, Converter={local:BoolToSwitchConverter}}"> 

 

                                    <ffimageloading:CachedImage.GestureRecognizers> 

 

                                        <TapGestureRecognizer 

 

              Command="{Binding BindingContext.EditItemTappedCommand, Source={x:Reference listView}}" 

 

              NumberOfTapsRequired="1" /> 

 

                                    </ffimageloading:CachedImage.GestureRecognizers> 

                                </ffimageloading:CachedImage>
</ViewCell.View> 

                        </ViewCell> 

                    </DataTemplate> 

                </listView:SfListView.ItemTemplate> 

            </listView:SfListView> 

 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

---

BI Biermeister March 6, 2018 07:36 AM UTC

That's it! Great! Thank you ;)

---

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 7, 2018 04:13 AM UTC

Hi Amador, 

Thanks for your valuable response. 

Regards, 

G.Muthu kumaran. 

---

DP Dhruval Patel February 26, 2019 05:14 AM UTC

What if the ViewCell is set by datatemplateselector

i have MainPage.Xaml with list view with Itemtemplate 

<sf:SfListView

            Grid.Row="1"

            AutoFitMode="Height"

            IsBusy="{Binding IsRefreshing}"

            ItemTemplate="{StaticResource ScheduleTemplateSeletor}"

            ItemsSource="{Binding Assignments}"

            SelectionMode="None"

            TapCommand="{Binding ScheduleItemTappedCommand}" />

I tried adding below code inside ViewCell.xaml view

<StackLayout.GestureRecognizers>

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

</StackLayout.GestureRecognizers>

Gets an error

System.Reflection.TargetInvocationException: <Timeout exceeded getting exception details>

---

GP Gnana Priya Namasivayam Syncfusion Team February 26, 2019 12:45 PM UTC

Hi Dhruval, 

  

Thanks for contacting Syncfusion support.  

We have checked the reported query from our side. We would like to let you know that inside the GestureRecognizer you can only pass the reference of the view that is loaded in current xaml page. We suspect that you are trying to add source as ListView which is in another xaml. We have attached the sample in which tap gesture works as expected when added in viewcell, please find the sample for your reference. 

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/136213/ze/TemplateSelector-1954552051  

  

Please let us know if your require any further assistance. 

  

Regards, 

Gnana Priya N 

---

DP Dhruval Patel February 26, 2019 01:28 PM UTC

Thank you for prompt response. It works and command trigger in Model. 

If Tapped is placed in Viewmodel, How can we trigger the Tapped command from viewmodel?

public Command Tapped { get; set; }

---

JN Jayaleshwari N Syncfusion Team February 27, 2019 07:54 AM UTC

Hi Dhruval, 

 

Thanks for the update. 

 

You can trigger the Tapped command form your ViewModel also. You need to bind the Tapped command by using viewmodel reference in your ViewCell. 

 

Code snippet XAML: Binding ViewModel command using reference key. 

 

<?xml version="1.0" encoding="utf-8" ?> 

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"           

             xmlns:local="clr-namespace:DataTemplateSelector" 

             x:Class="DataTemplateSelector.IncomingViewCell"> 

    <Grid x:Name="ViewCellGrid" ColumnSpacing="2" Padding="0"> 

        <Grid.Resources> 

            <ResourceDictionary> 

                <local:MainPageViewModel x:Key="viewModel"/> 

            </ResourceDictionary> 

        </Grid.Resources> 

        <Grid.GestureRecognizers> 

            <TapGestureRecognizer Command="{Binding Tapped,Source={StaticResource viewModel}}"/> 

        </Grid.GestureRecognizers> 

 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition Width="*"></ColumnDefinition> 

            <ColumnDefinition Width="40"></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="*"></RowDefinition> 

            <RowDefinition Height="Auto"></RowDefinition> 

 

        </Grid.RowDefinitions> 

        <Frame OutlineColor="Transparent" HasShadow="False" x:Name="frame"> 

            <Label TextColor="White" Text="{Binding Text}" LineBreakMode="WordWrap"  /> 

        </Frame> 

        <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/> 

 

    </Grid> 

</ViewCell> 

 

Please let us know if you would require further assistance. 

 

Regards, 

Jayaleshwari N. 

[Biermeister]

<ffimageloading:CachedImage 

      HorizontalOptions="EndAndExpand"

      VerticalOptions="Center"

      Aspect="AspectFill"                                

      Source="{Binding Active, Converter={local:BoolToSwitchConverter}}">

 

      <ffimageloading:CachedImage.GestureRecognizers>

          <TapGestureRecognizer

              Command="{Binding EditItemTappedCommand}"

              NumberOfTapsRequired="1" />

      </ffimageloading:CachedImage.GestureRecognizers>

 

</ffimageloading:CachedImage>

[Muthu Kumaran Gnanavinayagam]

Hi Amador, 

 

We have checked the reported query “Image.TapGesture does not work inside SfListView” from our side. We would like to let you know that when using Command for elements inside the ItemTemplate of SfListView, you need to pass the reference of SfListView to gesture as like below code example. 

 

Code Example[XAML]: 

<listView:SfListView x:Name="listView" ItemsSource="{Binding contactsinfo}" ItemSpacing="0,0,5,0"> 

<listView:SfListView.ItemTemplate> 

                    <DataTemplate> 

                        <ViewCell> 

                            <ViewCell.View>
<ffimageloading:CachedImage  

 

      HorizontalOptions="EndAndExpand" 

 

      VerticalOptions="Center" 

 

      Aspect="AspectFill"                                 

 

      Source="{Binding Active, Converter={local:BoolToSwitchConverter}}"> 

 

                                    <ffimageloading:CachedImage.GestureRecognizers> 

 

                                        <TapGestureRecognizer 

 

              Command="{Binding BindingContext.EditItemTappedCommand, Source={x:Reference listView}}" 

 

              NumberOfTapsRequired="1" /> 

 

                                    </ffimageloading:CachedImage.GestureRecognizers> 

                                </ffimageloading:CachedImage>
</ViewCell.View> 

                        </ViewCell> 

                    </DataTemplate> 

                </listView:SfListView.ItemTemplate> 

            </listView:SfListView> 

 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[Biermeister]

That's it! Great! Thank you ;)

[Muthu Kumaran Gnanavinayagam]

Hi Amador, 

Thanks for your valuable response. 

Regards, 

G.Muthu kumaran. 

[Dhruval Patel]

What if the ViewCell is set by datatemplateselector

i have MainPage.Xaml with list view with Itemtemplate 

<sf:SfListView

            Grid.Row="1"

            AutoFitMode="Height"

            IsBusy="{Binding IsRefreshing}"

            ItemTemplate="{StaticResource ScheduleTemplateSeletor}"

            ItemsSource="{Binding Assignments}"

            SelectionMode="None"

            TapCommand="{Binding ScheduleItemTappedCommand}" />

I tried adding below code inside ViewCell.xaml view

<StackLayout.GestureRecognizers>

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

</StackLayout.GestureRecognizers>

Gets an error

System.Reflection.TargetInvocationException: <Timeout exceeded getting exception details>

[Gnana Priya Namasivayam]

Hi Dhruval, 

  

Thanks for contacting Syncfusion support.  

We have checked the reported query from our side. We would like to let you know that inside the GestureRecognizer you can only pass the reference of the view that is loaded in current xaml page. We suspect that you are trying to add source as ListView which is in another xaml. We have attached the sample in which tap gesture works as expected when added in viewcell, please find the sample for your reference. 

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/136213/ze/TemplateSelector-1954552051  

  

Please let us know if your require any further assistance. 

  

Regards, 

Gnana Priya N 

[Dhruval Patel]

Thank you for prompt response. It works and command trigger in Model. 

If Tapped is placed in Viewmodel, How can we trigger the Tapped command from viewmodel?

public Command Tapped { get; set; }

[Jayaleshwari N]

Hi Dhruval, 

 

Thanks for the update. 

 

You can trigger the Tapped command form your ViewModel also. You need to bind the Tapped command by using viewmodel reference in your ViewCell. 

 

Code snippet XAML: Binding ViewModel command using reference key. 

 

<?xml version="1.0" encoding="utf-8" ?> 

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"           

             xmlns:local="clr-namespace:DataTemplateSelector" 

             x:Class="DataTemplateSelector.IncomingViewCell"> 

    <Grid x:Name="ViewCellGrid" ColumnSpacing="2" Padding="0"> 

        <Grid.Resources> 

            <ResourceDictionary> 

                <local:MainPageViewModel x:Key="viewModel"/> 

            </ResourceDictionary> 

        </Grid.Resources> 

        <Grid.GestureRecognizers> 

            <TapGestureRecognizer Command="{Binding Tapped,Source={StaticResource viewModel}}"/> 

        </Grid.GestureRecognizers> 

 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition Width="*"></ColumnDefinition> 

            <ColumnDefinition Width="40"></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="*"></RowDefinition> 

            <RowDefinition Height="Auto"></RowDefinition> 

 

        </Grid.RowDefinitions> 

        <Frame OutlineColor="Transparent" HasShadow="False" x:Name="frame"> 

            <Label TextColor="White" Text="{Binding Text}" LineBreakMode="WordWrap"  /> 

        </Frame> 

        <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/> 

 

    </Grid> 

</ViewCell> 

 

Please let us know if you would require further assistance. 

 

Regards, 

Jayaleshwari N.