Xamarin.Forms 向 ListView 中的图像添加 GestureRecognizer答案

【问题标题】：Xamarin.Forms Add a GestureRecognizer to an Image in a ListViewXamarin.Forms 向 ListView 中的图像添加 GestureRecognizer
【发布时间】：2014-09-09 19:06:50
【问题描述】：

我正在尝试向 ListView 中的图像添加点击手势

以下 Image 在没有 Image.GestureRecognizers 部分的 ListView 中正确呈现，但有了它，ListView 根本不会呈现任何东西（没有错误消息）。 为了澄清这一点，ListView 中还有一个 Label，它也不呈现。

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

我从 - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/ 获取了这个（假设这个示例不是用于列表视图图像，但假设它应该在列表视图中工作）。

也（根据评论建议）

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

似乎没有更好的公平性。

如果有人有一个如何在后面的代码中添加它的示例（没有视图模型很好），那么就可以了。

【问题讨论】：

注意TappedCallback已经过时，使用Command
尝试过的命令变体，结果相同。
具体是要点击的图片吗？ ListView 选择更改事件没有削减它？
我可以重新做一些事情来避免这种情况，但我真的必须这样做吗？我是不是在问一些不寻常的问题，即你不应该使用 ListView 并拥有单独的可点击图像吗？
WickedW 你解决过这个问题吗？

标签： xamarin xamarin.forms

【解决方案1】：

您可以在 ListView 中使用 DataTemplate，在 DataTemplate 内部有一个 Grid，然后添加 UI 元素。在给定的示例中，我显示了姓名、联系电话和图像，我在图像上使用了 GestureRecognizers。试试这个：

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

【讨论】：

【解决方案2】：

通过在 XAML 中使用自己的 x:Name 属性指定 TapGestureRecognizer，然后在代码中添加一个点击处理程序，我已经成功地使用了 TapGestureRecognizer。

示例标记：

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

然后在代码中类似于：

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

处理程序不一定要标记为async，对于我的使用来说，其中发生异步事件是很常见的，例如确认对话框或扫描条形码。

【讨论】：

【解决方案3】：

您还可以将手势识别器附加到列表视图中的图像。手势识别器可以绑定到视图模型中的命令

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

【讨论】：