如何通过视图单元格处理列表视图的项 点击手势识别器

Question

我有一个带有自定义视图单元格的列表视图，我在其中放置了一个标签和手势识别器。 如何使用带有点击手势识别器的标签来处理不同的项目。所以票价这是我的代码。

<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="5">
<Label Text="{Binding Title, Converter={StaticResource LettersConverter}}" FontSize="30" TextColor="#edfff1"/>
<Label Text="&#xf017;" FontSize="40">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Label.GestureRecognizers>
</Label>                                    
</StackLayout>                                
<StackLayout Orientation="Horizontal" Padding="1">
<Label Text="Alarm" TextColor="#edfff1" FontSize="Micro"/>
<Label Text="{Binding AlarmTime, StringFormat='{0:dddd, d MMMM, yyyy, HH:mm}'}"/>                                    
</StackLayout>
</StackLayout>
</ViewCell>

谢谢。

更新的代码：

Xaml：

<Label Text="&#xf017;">
<Label.GestureRecognizers>
<TapGestureRecognizer                                                         
Command="{Binding TapCommand}"
CommandParameter="{Binding .}" />
</Label.GestureRecognizers>
</Label>

法典：

ICommand tapCommand;
public MainPage()
{
tapCommand = new Command(OnTapped);
}
public ICommand TapCommand
{
get { return tapCommand; }
}
void OnTapped(object s)
{
test.Text = "Works";            
}

最终工作代码。

Xaml：

<Label Text="Test">
<Label.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Path = TapCommand, Source={x:Reference MainPage}}" CommandParameter="{Binding .}"
/>
</Label.GestureRecognizers>
</Label>

代码隐藏。

ICommand tapCommand;
//constructor
public MainPage()
{
tapCommand = new Command(OnClick);
}
public ICommand TapCommand
{
get { return tapCommand; }
}
void OnClick(object i)
{
var model = (Note)i;
st.Text = model.Title;
} 

Answer 1

这真的很容易。 3个特殊步骤

1 像这样将对象绑定到标签上 命令参数="{绑定 .}"

2 创建函数来调用 Tapped="TapGestureRecognizer_Tapped"

<StackLayout Orientation="Horizontal" Padding="5">
<Label Text="{Binding Title, Converter={StaticResource LettersConverter}}" FontSize="30" TextColor="#edfff1"/>
<Label Text="&#xf017;" FontSize="40">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" CommandParameter="{Binding .}" />
</Label.GestureRecognizers>
</Label>                                    
</StackLayout>   

3 在您的代码隐藏中获取选定的标签 var lbl = 发件人作为标签; 获取绑定模型，因为选定的变量已选择项 = lbl。BindingContext as YourModel;

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{

var lbl = sender as Label;
var selectedItem = lbl.BindingContext as YourModel;
if (selectedItem == null) return;
// now you can access any property of your model
// for example  var id = YourModel.id
// or you can pass your model to a function like
//HideorShowDetail(selectedItem);
}

请注意，您可以对任何对象使用此方法。 例如，如果您在列表视图中创建可单击的图像。

var lbl = sender as Label; will be var img = sender as Image;

button would be var btn = sender as Button;等

Answer 2

如果我理解正确，您想知道单击了哪个标签。如果我是你，我会使用 ICommand 而不是事件处理程序和一个 CommandParameter，它为您提供类似于项 ID 的东西。

<TapGestureRecognizer Command="{Binding OnClickCommand}"
CommandParameter="{Binding ItemId}" />

在视图模型或代码隐藏中(取决于BindingContext是什么(，您需要像这样实现 ICommand：

ICommand _onClickCommand;
public ICommand OnClickCommand 
{
get { return _onClickCommand; }
}
public YourViewModel() {
OnClickCommand = new Command (OnClick);
}
void OnClick(object i) {
var labelId = Convert.ToString(i);
// Now you know which label was clicked and you can do something with it
}

Xamarin有一个很好的教程，介绍如何在他们的官方文档中做这样的事情 这里.

---

编辑：所以，这似乎是你正在寻找的。

<TapGestureRecognizer Command="{Binding OnClickCommand}"
CommandParameter="{Binding .}" />

然后

void OnClick(object i) {
var model = (YourViewModel)i;
// Now you can access model.AlarmTime, model.Title etc.
}

---

编辑 2：这里的问题是 TapGestureRecognizer 没有指向页面的 BindingContext。您需要做的是：

<TapGestureRecognizer Command="{Binding Path = BindingContext.OnClickCommand, Source={x:Reference MainPage}}" CommandParameter="{Binding .}" />

此外，将 x：Name 添加到您的主页，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App6"
x:Class="TestApp.MainPage"
x:Name="MainPage"> <!-- x:Reference points here -->

现在，当您点击标签时，OnClickCommand 位于主 BindingContext 中，而不是在 ListView 的 ItemsSource 中。