点击ListView中的按钮获取当前项目（Xamarin.Forms）

Question

我有以下列表视图（项源在外部设置，是一个字符串列表）：

<?xml version="1.0" encoding="utf-8" ?>
<ListView xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="XXX.EditItemsList">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding .}"/>
                    <Button Text="Delete"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>

</ListView>

点击按钮时，我想要从列表中删除当前项目（字符串）。这可能吗？

谢谢您的帮助 :)

- everydayXpert

Answer 1

原则上，我认为@Krzysztof Skowronek给出的答案是正确的，我将尝试详细解释一下，并避免使用ViewModel，因为似乎您没有使用它（尽管在Xamarin Forms中使用它是最佳实践）。

按照您自己的代码，我在XAML中编写了以下代码：

<?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:DeleteButton"
             x:Class="DeleteButton.MainPage">

    <ListView x:Name="listView"
              HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <Label Text="{Binding .}"/>
                        <Button Text="Delete" Clicked="Delete"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>    
</ContentPage>

关于此解决方案的这一部分，我想提出以下评论：

• 请注意在XAML顶部使用了ContentPage而不是ListView，这是有意为之吗？

• 然后，请注意在ListView上添加了x:Name属性。它将用于从后台代码与ListView进行通信。

• 另外请注意HasUnevenRows属性设置为True。这会自动调整ListView行的高度。

• 最后，请查看Button中我将Clicked事件设置为“Delete”，这是后台代码中事件处理程序的名称，您将会看到。

在后台代码中我编写了：

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace DeleteButton
{
    public partial class MainPage : ContentPage
    {
        ObservableCollection<String> list;

        public MainPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            list = new ObservableCollection<string>()
            {
                "Task 1", "Task 2", "Task 3", "Task 4", "Task 5",
                "Task 6", "Task 7", "Task 8", "Task 9", "Task 10"                    
            };

            listView.ItemsSource = list;
        }

        public void Delete(Object Sender, EventArgs args)
        {
            Button button = (Button)Sender;
            StackLayout listViewItem = (StackLayout)button.Parent;
            Label label = (Label)listViewItem.Children[0];

            String text = label.Text;

            list.Remove(text);
        }
    }
}

在那里，我将字符串列表定义为ObservableCollection（ObservableCollection会导致ListView在每次更改时得到通知，以便更新其内容，请参见文档以获取更多详细信息）。

然后，像您已经做的那样，将ListView的ItemSource属性设置为字符串集合。

最后，在XAML中通过Button的Click事件调用EventHandler Delete。这里的算法非常简单：

首先，将sender转换为Button（我们知道触发事件的对象是Button）。

然后我们向上遍历层次结构，直到包含Button和Label的StackLayout，并检索第一个子项，我们知道它是Label。

一旦我们有了Label，我们检索它的Text属性并调用集合的Remove方法，以摆脱该项。

就是这样。

注意：如果我自己实现此功能，我宁愿定义一个对象集合，其中包含Text属性和Id属性，以便准确删除点击的元素。在上面的代码中，如果集合包含两个相同的字符串，EventHandler将仅寻找第一个出现的字符串。

我希望这可以帮助您找到解决问题的正确方法。

- deczaloth

Answer 2

如果您不想使用命令，可以使用按钮的单击事件。例如：

<Button Text="Delete" Clicked="HandleDeleteButtonClicked" />

然后在你的代码后台文件中，

private void HandleDeleteButtonClicked(object sender, EventArgs e)
{
    // Assuming your list ItemsSource is a list of strings
    // (If its a list of some other type of object, just change the type in the (cast)):
    var stringInThisCell = (string)((Button)sender).BindingContext;

    // Now you can delete stringInThisCell from your list.
    myList.Remove(stringInThisCell);
}

- sme

Answer 3

如果我们愿意坚持MVVM的方法，那么在您的View中，为ContentPage（或任何根元素）命名，并将其用作绑定命令的来源：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="canaraydash.View.InviteListPage"
   x:Name="InvitesView">

   <ListView x:Class="XXX.EditItemsList">
      <ListView.ItemTemplate>
         <DataTemplate>
            <ViewCell>
               <StackLayout>
                  <Label Text="{Binding .}" />
                  <Button Text="Delete"
                   Command="{Binding Path=BindingContext.AcceptRequestCommand, Source={x:Reference InvitesView}}"
                   CommandParameter="{Binding .}" />
               </StackLayout>
            </ViewCell>
         </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
</ContentPage>

在您的ViewModel中，定义“AcceptRequestCommand”命令！

- Jay Thaker

---

我在命令之前错过了 BindingContext.，谢谢。 - Raj K

Answer 4

在您的控件（或最好是其ViewModel）中创建一个带参数的DeleteItem命令，然后在xaml中：

 <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding .}"/>
                    <Button Text="Delete" Command="{Binding Source={this should be your VM for the whole thing}, Path=DeleteItem}" CommandParameter="{Binding}"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>

在命令中： list.Remove(parameter); 如果该列表可观察，它将会消失。

- Krzysztof Skowronek

---

“Binding Source={this should be your VM for the whole thing}”是什么意思？VM应该长成什么样子？项目源是可观察的，是的。 - everydayXpert

通常情况下，有一个具有公共属性ItemsList的ViewModel。同一VM应该有DeleteItem命令。至于绑定，在模板内，DataContext设置为列表中特定项。您必须将其更改为单个绑定。最简单的方法是设置xaml基本节点的Name属性，并使用ElementName和Path = ViewModel。 - Krzysztof Skowronek

Answer 5

这是我对问题的解决方案

              <DataTemplate>
                    <Button Text="{Binding DisplayName}" Image="tab_about.png" ContentLayout="Top,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:AnimationViewModel}}, Path=AnimationCommand}"
                            CommandParameter="{Binding .}" />
                </DataTemplate>

而模型视图文件是一个普通的命令：

        public ObservableCollection<LedAnimation> AnimationList { get; }
        public Command<LedAnimation> AnimationCommand { get; }

        public AnimationViewModel()
        {
            Title = "Animation";
            AnimationList = new ObservableCollection<LedAnimation>();
            AnimationCommand = new Command<LedAnimation>(OnLedAnimationTap);            

            _serverService.AnimationCapabilities.ForEach(x => AnimationList.Add(x));
        }

        private void OnLedAnimationTap(LedAnimation animation)
        {
            if (animation == null)
                return;

            Console.WriteLine($"VM:{animation.Name}");
        }

- MaxThom