CODEWITHSUNDEEP
xamarinxamarin.forms
WickedW
WickedW

Reputation: 2591

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

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.

Upvotes: 10

Views: 20530

Answers (3)

Patrick Goode
Patrick Goode

Reputation: 1452

You can also attach a gesture recognizer to an image inside a listview. The gesture recognizer can bind to a command in a 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>

Upvotes: 0

Mark Larter
Mark Larter

Reputation: 2363

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.

Upvotes: 1

KirtiSagar
KirtiSagar

Reputation: 584

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>

Upvotes: 3

Related Questions