Xamarin.Forms Add GestureRecognizer to Image in ListView

Question

I am trying to add a highlight gesture to an image in a ListView

The ListView displays an Image without the Image.GestureRecognizers section, but with it the ListView does not display anything (no error message). To clarify this, the ListView also has a shortcut that also does not appear.

<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/ (suppose this example is intended not to be list view, but suggested that it should work within the list).

Also (as suggested by comments)

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

It doesn't seem to look any better.

If anyone has an example of how to add this to the code behind (without being able to view), then this will do.

Answer 1

You can use the DataTemplate in the ListView, and inside the DataTemplate there is a Grid, then add user interface elements. In this example, I show the name, contact number and image, I used GestureRecognizers on the image. Try the following:

 <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 had success with TapGestureRecognizer for purposes such as this, specifying it in XAML with my own x:Name attribute, and then adding a tap handler to the code.

Layout Example:

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

Then in the code something like:

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

The handler does not have to be marked async , for my purposes it is just a common occurrence that something asynchronous happens there, for example, a confirmation dialog box or a barcode scan.

Answer 3

You can also attach a gesture recognizer to the image inside the list. Gesture Recognizer can snap to a team in the view model

  <ListView x:Name="ExampleList" SeparatorVisibility="None" VerticalOptions="Start" HeightRequest="{Binding HeightRequest}" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemsSource="{Binding FeedItems}" IsPullToRefreshEnabled="True" RefreshCommand="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=OneWay}"> <ListView.ItemTemplate > <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <StackLayout Orientation="Vertical"> <Label Text="{Binding TimeAgo}" FontSize="8"></Label> <StackLayout Orientation="Horizontal"> <Image Source="Accept.png" HeightRequest="30" WidthRequest="45" IsVisible="{Binding IsAccepted, Converter={StaticResource inverse}}"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding Source={StaticResource sampleViewModel}, Path=AcceptCommand}" CommandParameter="{Binding RequestID}" /> </Image.GestureRecognizers> </Image> </StackLayout> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>