如何在 Xamarin Forms 中使用 SwipeView 从 CollectionView 中删除项目？

Question

我目前正在制作一个笔记应用程序。我是新手，请原谅我缺乏知识。我正在使用默认的弹出菜单模板，并根据我的需要进行了更改。我在我的 CollectionView 中使用 SwipeView，因此当您在 'note' 上滑动时，该项目将在执行时删除。

我可以滑动，但滑动后无法删除项目。

这是我的ItemsPage.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"
             x:Class="xamarinMobileTest.Views.ItemsPage"
             Title="{Binding Title}"
             xmlns:local="clr-namespace:xamarinMobileTest.ViewModels"  
             xmlns:model="clr-namespace:xamarinMobileTest.Models"  
             x:Name="BrowseItemsPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add Note" Command="{Binding AddItemCommand}" />
    </ContentPage.ToolbarItems>

    <ContentPage.BindingContext>
        <local:ItemsViewModel/>
    </ContentPage.BindingContext>

    <RefreshView x:DataType="local:ItemsViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <CollectionView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"
                SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                     <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItems Mode="Execute">
                                <SwipeItem Text="Delete" 
                                           BackgroundColor="Red"
                                           Command="{Binding DeleteItemCommand}"
                                           CommandParameter="{Binding .}"/>
                            </SwipeItems>
                        </SwipeView.RightItems>
                        <StackLayout Padding="10" x:DataType="model:Item">
                            <Label Text="{Binding Text}"
                                   LineBreakMode="NoWrap" 
                                   Style="{DynamicResource ListItemTextStyle}" 
                                   FontSize="16"
                                   FontAttributes="Bold"
                                   TextColor="Black"/>
                            <Label Text="{Binding Description}" 
                                   LineBreakMode="NoWrap"
                                   Style="{DynamicResource ListItemDetailTextStyle}"
                                   FontSize="13"
                                   TextColor="Black"/>
                            <Label Text="{Binding DueDate}"
                            Style="{DynamicResource ListItemDetailTextStyle}"
                                   FontSize="13"
                                   TextColor="Black"/>
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer 
                                NumberOfTapsRequired="1"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"     
                                CommandParameter="{Binding .}">
                                </TapGestureRecognizer>
                            </StackLayout.GestureRecognizers>
                       </StackLayout>
                    </SwipeView>
                </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    </RefreshView>
</ContentPage>

项目视图模型：

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    
    using xamarinMobileTest.Models;
    using xamarinMobileTest.Views;

    namespace xamarinMobileTest.ViewModels
    {
    public class ItemsViewModel : BaseViewModel
    {
        private Item _selectedItem;

        public ObservableCollection<Item> Items { get; }
        public Command LoadItemsCommand { get; }
        public Command AddItemCommand { get; }
        public Command<Item> ItemTapped { get; }

        public Command<Item> DeleteItemCommand { get; }

        public ItemsViewModel()
        {
            Title = "Notes";
            Items = new ObservableCollection<Item>();
            LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());

            ItemTapped = new Command<Item>(OnItemSelected);

            AddItemCommand = new Command(OnAddItem);

            DeleteItemCommand = new Command<Item>(OnDeleteItem);
    }

        async Task ExecuteLoadItemsCommand()
        {
            IsBusy = true;

            try
            {
                Items.Clear();
                var items = await DataStore.GetItemsAsync(true);
                foreach (var item in items)
                {
                    Items.Add(item);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
            finally
            {
                IsBusy = false;
            }
        }

        public void OnAppearing()
        {
            IsBusy = true;
            SelectedItem = null;
        }

        public Item SelectedItem
        {
            get => _selectedItem;
            set
            {
                SetProperty(ref _selectedItem, value);
                OnItemSelected(value);
            }
        }

        private async void OnAddItem(object obj)
        {
            await Shell.Current.GoToAsync(nameof(NewItemPage));
        }

        async void OnItemSelected(Item item)
        {
            if (item == null)
                return;

            // This will push the ItemDetailPage onto the navigation stack
            await Shell.Current.GoToAsync($"{nameof(ItemDetailPage)}?{nameof(ItemDetailViewModel.ItemId)}={item.Id}");
        }

        private void OnDeleteItem(Item item)
        {
            Items.Remove(item);
        }

    }
}

*需要的其他代码可以通过打开默认弹出菜单模板找到

如何在可观察集合中滑动删除项目，以便在删除项目时自动看到项目已删除？

Items.Remove(item); 似乎不起作用（没有错误，只是没有从 CollectionView 中删除项目）这是为什么？

await DataStore.DeleteItemAsync(item); 有同样的问题，就是滑动项目时没有任何反应。

感谢任何帮助。

Answer 1

您在 OnDeleteItem 中的代码毫无意义。它应该看起来像这样

private void OnDeleteItem(Item item)
{
    Items.Remove(item);
}

Answer 2

将您的参数更改为此

 CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"

如何在 Xamarin Forms 中使用 SwipeView 从 CollectionView 中删除项目？

How to delete item from CollectionView with SwipeView in Xamarin Forms?

c#

xamarin.forms

collectionview

swipeview