Xamarin - удалить элемент из CollectionView, команда не вызывается

Question

Я новичок в 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-код:

    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 таким образом? Или есть более удобный способ удаления элемента?

Буду признателен, если кто-нибудь может мне помочь в этом!

Answer 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"/>