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>

点击按钮，我想删除列表中的当前项目（字符串）。这怎么可能？

感谢您的帮助：）

Answer 1

原则上我认为@Krzysztof Skowronek给出的答案是正确的，我将简单地尝试详细说明，并避免使用ViewModel，因为它似乎没有使用它（尽管使用它是最佳实践关于Xamarin表格。）

按照自己的代码，我在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顶部使用ConntentPage而不是ListView，是故意的吗？
然后，请注意在ListView上添加x：Name。它将用于从后面的代码与ListView进行通信。
另外请注意HasUnevenRows的使用设置为True。这会导致ListView自动调整行的高度。
最后看到在Button中我已经设置了事件Clicked to“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更新其内容，有关详细信息，请参阅文档）。

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

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

首先将发送者强制转换为Button（我们知道触发事件的对象是Button）。

然后我们将层次结构树向上走到包含Button和Label的StackLayout，并检索它的第一个子节点，我们知道它是Label。

一旦我们有了Label，我们就会检索它的Text属性并调用该集合的Remove方法来获取该项目。

就是这样。

注意：如果我自己实现此功能，我宁愿定义一个对象集合，这些对象将包含Text属性以及Id属性，以便精确删除被轻击的元素。在上面的代码中，如果集合包含两个相同的字符串，则EventHandler将仅用于第一次出现。

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

Answer 2

如果您不想使用命令，可以使用Button的Clicked事件。 IE，

<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);
}

Answer 3

如果我们愿意保留MVVM方法，则在您的View中，命名ContentPage（或存在的任何根元素）并将其用作绑定命令的Source：

<?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”命令！

Answer 4

这是我解决这个问题的方法

              <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}");
        }

Answer 5

使用控件中的参数（或者最好是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);

如果列表是可观察的，它将消失。

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

5 个答案: