Xamarin.Forms Aggiungi un GestureRecognizer a un'immagine in un controllo ListView

Question

Sto cercando di aggiungere un gesto rubinetto per un'immagine all'interno di un ListView

Il seguente Immagine rende correttamente nel ListView senza le Image.GestureRecognizers sezione, ma con esso, il ListView non esegue alcun rendering (nessun messaggio di errore). Per chiarire questo, c'è anche un'etichetta nel ListView e che non esegue il rendering neanche.

<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> 

Ho preso questa da - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/ (si presuppone questo esempio è per non un'immagine ListView, ma assunto dovrebbe funzionare all'interno di una listview).

anche (come da commento suggerimento)

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

non sembra giusto meglio.

Se qualcuno ha un esempio di come aggiungere questo codice nel codice (senza un viewmodel va bene), allora lo farà.

Answer 1

È possibile utilizzare DataTemplate in ListView e all'interno di DataTemplate disporre di una griglia, quindi aggiungere gli elementi dell'interfaccia utente. Nell'esempio dato, sto mostrando il nome, il numero di contatto e l'immagine, ho usato i GestureRecognizers sull'immagine. Prova questo: successo

<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

che ho avuto con TapGestureRecognizer negli usi come questo specificando in XAML con il suo attributo x:Name, quindi l'aggiunta di un gestore del rubinetto in codice.

Esempio di marcatura:

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

Poi nel codice di qualcosa di simile a:

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

Il conduttore non deve necessariamente essere contrassegnato async, è solo buon per i miei usi che qualcosa asincrona sta accadendo in là , come una finestra di conferma o la scansione di un codice a barre.

Answer 3

È inoltre possibile allegare un riconoscimento di gesti a un'immagine all'interno di un listview. Il sistema di riconoscimento gesto può associare a un comando in un modello di vista

 <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>