• 1
Votes
name

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.GestureRecognizerssection, 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.

 

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>
  • 0
Reply Report