Listview中的图像点击手势没有响应答案

【问题标题】：Image tap gesture in Listview not respondingListview中的图像点击手势没有响应
【发布时间】：2021-01-15 00:43:46
【问题描述】：

我有一个 Listview 组标题，其中包含一个图像按钮 - imgAdd - 它不响应点击手势。我已经尝试了目前在这个主题上可用的各种方法，但似乎没有任何效果.. 对此有帮助吗？我希望它触发绑定视图模型中的方法以导航到页面 - 没什么复杂的。

code

                        <ListView.GroupHeaderTemplate 
                    SeparatorVisibility="Default"><DataTemplate>
                            <ViewCell Height="110"  > 
                                <Grid VerticalOptions="Start" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="70"/>  
                                    </Grid.RowDefinitions>

                                    <!--Headers-->
                                    <StackLayout VerticalOptions="Fill" BackgroundColor="White"
                                                 HeightRequest="5" > <!--150-->
                                        <!--
                                         <Frame OutlineColor="#FFB607" HasShadow="False" Padding="0,0,0,0"
                                           IsClippedToBounds="False" CornerRadius="0" Margin="0,0,0,0">
                                        -->
                                       
                                      
                                            <Label
                                                   Grid.Row="0"
                                                   HeightRequest="70" 
                                                   FontAttributes="None"
                                                   Margin="0,0,0,20"                                       
                                                   FontSize="18"
                                                   Text="{Binding CategoryName}"
                                                   Padding="20,5,0,10"
                                                   TextColor="White"
                                                   BackgroundColor="#FFB607"
                                                   VerticalTextAlignment="Center"
                                                   FontFamily="Hiragino Sans"
                                                   xmlns:local="project.Controls"                                       
                                                   MinimumHeightRequest="70"                                                       
                                                   x:Name="lblTitle"
                                                  />
                                            <Image
                                                Grid.Row="3"
                                                Grid.Column="4"
                                                HeightRequest="30"
                                                WidthRequest="30"
                                                HorizontalOptions="EndAndExpand"                                                   
                                                x:Name="imgAdd"
                                                Source="btnAdd.png"
                                                Margin="0,-20,20,0"
                                                >
                                                <Image.GestureRecognizers>
                                                     <TapGestureRecognizer  Command="{Binding Source={StaticResource myHomePageViewModel}, Path=ListOnTapCommand}" 
                                                              />                                                        
                                                </Image.GestureRecognizers>
                                            </Image>

                                
                                   </StackLayout>

                                    
                                    <Image x:Name="ImgA" Source="{Binding StateIcon}"  Margin="0,0,25,0"
                                           HeightRequest="20" WidthRequest="20" HorizontalOptions="End"/>
                                    
                                    <Grid.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding Source={x:Reference homePage},
                                            Path=BindingContext.RefreshLogsCommand}"
                                                              NumberOfTapsRequired="1" CommandParameter="{Binding .}"/>
                                    </Grid.GestureRecognizers>                                       

                                </Grid>
                                   <!-- </Frame>-->
                            </ViewCell>

code

型号


public ICommand ListOnTapCommand { get; set;  }


        public myHomePageViewModel()
        {
           ListOnTapCommand = new Command(ListOnTap)
        }

        private void ListOnTap()
        {
            // do something
            App.NavigationPage.Navigation.PushAsync(new search());
        }
 
        private void ListOnTap()
        {
            // do something
            App.NavigationPage.Navigation.PushAsync(new search());
        }

【问题讨论】：

嗨，myHomePageViewModel 是否是另一个与ListView 的ItemSource 不同的ViewModel？你可以分享ContentPage.cs的代码和绑定的ViewModel。

标签： image listview xamarin button gesture

【解决方案1】：

我通过将 Label 和 Image 元素放在 Grid 标记中解决了这个问题。

【讨论】：

【解决方案2】：

如果ListVew Cell的Item模型如下：

public class Item 
{
    public string Name {set; get;}
    ...
}

那么CustomViewModel可以如下：

public class CustomViewModel : ObservableCollection<Item>
{
    public string CategoryName { get; set; }
    
    public ICommand ListOnTapCommand
    {
        get
        {
            return new Command((e) =>
            {
                var item = (e as Item);
                // deal with Item Model of Tapped Cell
            });
        }
    }      
  
}

现在ContentPage添加CustomViewModel如下：

public partial class GroupedListXaml : ContentPage
{
    private ObservableCollection<CustomViewModel> grouped { get; set; }
    public GroupedListXaml ()
    {
        InitializeComponent ();
        grouped = new ObservableCollection<CustomViewModel> ();
        var veggieGroup = new CustomViewModel() { CategoryName = "vegetables" };
        var fruitGroup = new CustomViewModel() { CategoryName = "fruit" };
        veggieGroup.Add (new Item() { Name = "celery", IsReallyAVeggie = true, Comment = "try ants on a log" });
        veggieGroup.Add (new VeggieModel () { Name = "tomato", ...});
        veggieGroup.Add (new VeggieModel () { Name = "zucchini", ... });
        ...
        fruitGroup.Add (new VeggieModel () {Name = "banana" , ...});
        fruitGroup.Add (new VeggieModel () {Name = "strawberry", ...});
        fruitGroup.Add (new VeggieModel () {Name = "cherry", ...});
        grouped.Add (veggieGroup); grouped.Add (fruitGroup);
        lstView.ItemsSource = grouped;
    }
}

您可以修改 Xaml 代码如下：

<ListView.GroupHeaderTemplate>
...
<Grid VerticalOptions="Start"  x:Name="Item">
...
 <Image
      Grid.Row="3"
      Grid.Column="4"
      HeightRequest="30"
      WidthRequest="30"
      HorizontalOptions="EndAndExpand"                                                   
      x:Name="imgAdd"
      Source="btnAdd.png"
      Margin="0,-20,20,0">
      <Image.GestureRecognizers>
         <TapGestureRecognizer  Command="{Binding TapCommand}"
                                CommandParameter="{Binding Source={x:Reference ListOnTapCommand}, Path=BindingContext}"
          />                                                        
      </Image.GestureRecognizers>
  </Image>
...
</Grid>
...
</ListView.GroupHeaderTemplate >

【讨论】：

感谢江先生的帮助，有几个问题，我已经按照上面的方法添加了您的项目模型并进行了绑定更改，但按钮仍然没有响应。你能告诉我 TapCommand 指的是什么吗？没有模型可以做到这一点吗？
@Avatar 我已经更新了答案，你有时间可以看看。如果你解决了这个问题，记得在你有时间的时候标记你的答案。