Xamarin.Forms Add a GestureRecognizer to an Image in a ListView

Question

I am trying to add a tap gesture to an Image within a ListView

The following Image renders correctly in the ListView without the Image.GestureRecognizers section, but with it, the ListView does not render anything at all (no error message). To clarify this, there is also a Label in the ListView and that does not render either.

<Image x:Name="newsImage" VerticalOptions="End" HeightRequest="200" WidthRequest="200" Aspect="AspectFill" Source="{Binding Imageurllarge}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer 
                                Tapped="OnTapGestureRecognizerTapped" 
                                NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>

I took this from - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/ (assume this example is for not listview image, but assumed it should work within a listview).

Also (as per comment suggestion)

<Image.GestureRecognizers>
    <TapGestureRecognizer 
      Command="{Binding TapCommand}" 
      CommandParameter="newsImage" />

Does not seem to fair any better.

If anyone has an example of how to add this in the code behind (without a viewmodel is fine) then that will do.

Answer 1

You can use the DataTemplate in the ListView and inside the DataTemplate have a Grid then add the UI elements. In the given sample, I am showing the Name, contact number and Image, I have used the GestureRecognizers on the Image. Try this:

<ListView x:Name="myListView" ItemsSource="{Binding Contacts}" >             
<ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell Height="75">
        <Grid Padding="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition Height="20"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="80"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="user_img.png" Grid.Column="0" Grid.RowSpan="2" VerticalOptions="CenterAndExpand"/>
            <Label Grid.Row="0" Grid.Column="1" Font="16" Text="{Binding DisplayName}" LineBreakMode="TailTruncation"></Label>
            <Label Grid.Row="1" Grid.Column="1" Font="12" Text="{Binding Number}"  LineBreakMode="TailTruncation"></Label>

            <Image Grid.Row="0" Grid.RowSpan="3"  Grid.Column="2" Source="add.png" Aspect="AspectFill">
            <Image.GestureRecognizers>
                <TapGestureRecognizer 
                    Command="{Binding AddCommand}" 
                    CommandParameter="{Binding Number}" />
                  </Image.GestureRecognizers>
            </Image>        
        </Grid>
        </ViewCell>
     </DataTemplate>
   </ListView.ItemTemplate>    
</ListView>

Answer 2

I have had success with TapGestureRecognizer in uses like this one by specifying it in XAML with its own x:Name attribute, then adding a tap handler in code.

Example markup:

<Image.GestureRecognizers>
    <TapGestureRecognizer x:Name="tapImage" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>

Then in code something like:

this.tapImage.Tapped += async (object sender, EventArgs e) => {
... // Do whatever is wanted here
}

The handler need not necessarily be marked async, it is just common for my uses that something async is happening in there, like a confirm dialog or scanning a bar code.