Xamarin - 从 CollectionView 中删除项目，命令不会被调用答案

【问题标题】：Xamarin - Delete item from CollectionView, Command does not get calledXamarin - 从 CollectionView 中删除项目，命令不会被调用
【发布时间】：2020-06-18 21:57:09
【问题描述】：

我是 Xamarin 的新手，我构建了一个简单的应用程序，您可以在其中将字符串添加到 ObservableCollection 并通过 CollectionView 元素呈现它。现在，我还在集合中的每个字符串旁边制作了一个删除按钮，以删除一个条目。因此，我想调用我的“DeleteCommand”。但是当我调试应用程序时，我可以看到构造函数中的 DeleteCommand 在单击删除按钮时没有被调用。该命令应该获取条目的字符串作为参数。

这是我的 XAML 代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:TestProjectXamarin"
             mc:Ignorable="d"
             x:Class="TestProjectXamarin.MainPage">


    <ContentPage.BindingContext>
        <local:MainPageViewModel/>
    </ContentPage.BindingContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height=".5*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Source="" BackgroundColor="PowderBlue"
               Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"/>
        <Editor Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Placeholder="Enter Note Here"
                Margin="10,10" Text="{Binding TheNote}"/>
        <Button Grid.Row="2" Grid.Column="0" Text="Save" Command="{Binding SaveCommand}" BackgroundColor="LimeGreen"/>
        <Button Grid.Row="2" Grid.Column="1" Text="Erase" Command="{Binding EraseCommand}" BackgroundColor="OrangeRed"/>

        <CollectionView x:Name="collectionView" ItemsSource="{Binding AllNotes}" Grid.Row="3" Grid.ColumnSpan="2">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame Margin="5">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=".5*"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Label Text="{Binding .}" Grid.Row="0"/>
                                <Button Text="Delete" Command="{Binding DeleteCommand}" CommandParameter="{Binding .}" Grid.Row="1"/>
                            </Grid>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

</ContentPage>

还有我的 CS-Code：

    namespace TestProjectXamarin
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        public MainPageViewModel()
        {
            EraseCommand = new Command(() =>
            {
                TheNote = string.Empty;
            });

            SaveCommand = new Command(() =>
            {
                AllNotes.Add(TheNote);

                TheNote = string.Empty;
            });

            DeleteCommand = new Command<string>(
                execute: (string arg) =>
                {
                    TheNote = arg;
                }
            );
        }

        public ObservableCollection<string> AllNotes { get; set; } = new ObservableCollection<string>();

        public event PropertyChangedEventHandler PropertyChanged;

        string theNote;

        public string TheNote
        {
            get => theNote;
            set
            {
                theNote = value;
                var args = new PropertyChangedEventArgs(nameof(TheNote));

                PropertyChanged?.Invoke(this, args);
            }
        }

        public Command SaveCommand { get; }
        public Command EraseCommand { get; }
        public Command DeleteCommand { private set; get; }
    }
}

我在这里做错了什么？我不能以这种方式从这样的 CollectionView 中调用命令吗？还是有更合适的删除项目的方法？

如果有人可以帮助我，将不胜感激！

【问题讨论】：

CollectionView 中每个元素的绑定上下文只是一个字符串（因为您的 ItemsSource 是一个 IEnumerable），并且字符串没有 DeleteCommand 属性。您要么需要更新绑定路径以指向基础 VM，要么只使用 Button 的 Clicked 事件，该事件不依赖于绑定上下文
我的解决方案对您有用吗？如果是，请您接受（点击此答案左上角的☑️），以便我们可以帮助更多有相同问题的人:)。

标签： c# android .net xamarin mobile

【解决方案1】：

DeleteCommand 在您的 ViewModel 中，因此解决方案是：

1.给你的页面定义一个名字，我们称之为MyPage：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:App283"
             mc:Ignorable="d"

             x:Name="MyPage"

             x:Class="App283.MainPage">

2.然后像这样绑定你的DeleteCommand：

<Button Text="Delete" Command="{Binding BindingContext.DeleteCommand, Source={x:Reference MyPage}}" CommandParameter="{Binding .}" Grid.Row="1"/>

【讨论】：