XAML . NET MAUI-将CollectionView项目索引传递给命令

b4qexyjb  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(231)

我有一个可以向其中添加设备项的CollectionView。如果用户添加了太多项,我希望能够删除它们。

当按下红色按钮时,如何将ItemsSource中项目的索引传递给RemoveEquipmentCommand?

<CollectionView ItemsSource="{Binding NewLogEntry.EquipmentDetails}"
                SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:EquipmentDetails">
            <Frame Margin="0,0,0,10">
                <VerticalStackLayout>
                    <Grid ColumnDefinitions="*,Auto">
                        <Picker Title="Pick Component Type"
                            ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type viewModel:AddLogEntryViewModel}}, Path=ComponentTypes}"
                            SelectedItem="{Binding ComponentType}"
                            Style="{StaticResource MediumLabel}"
                            HorizontalOptions="Center"
                            Grid.Column="0" />

                        <Button Text="x"
                                BackgroundColor="Red"
                                Grid.Column="1"
                                Command="{Binding RemoveEquipmentCommand}" />
                    </Grid>

我知道有一个手势识别器,使它成为一个滑动左删除功能,但他们不支持在Windows应用程序平台.我仍然需要这个桌面应用程序上的删除按钮.

h6my8fg2

h6my8fg21#

我们一般不会得到数据的索引,因为如果我们改变数据,索引的值总是会改变。
我们可以通过将选定项传递给CommandParameter来获取该项。
我创建了一个demo来实现这个功能,可以参考下面的代码:
xaml:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiCollectionApp.MainPage"
              xmlns:local="clr-namespace:MauiCollectionApp"
             x:Name="myPage"
             >

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

   <CollectionView  ItemsSource="{ Binding Data}" x:Name="mCollectionView" >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <HorizontalStackLayout  Margin="3" >
                             <Label Text="{Binding Name}" BackgroundColor="Gray"/>
                             

                           <Button Text="delete"  Margin="10,0,0,0"
                                BackgroundColor="Red"
                                Command="{Binding  Path= BindingContext.RemoveEquipmentCommand,Source={Reference mCollectionView }}"  CommandParameter="{Binding .}"  
                                 />
                       </HorizontalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
   </CollectionView>

</ContentPage>

我的视图模型.cs

public class MyViewModel: INotifyPropertyChanged 
    {
       public  ObservableCollection<MyModel> Data {get;set;}

        public ICommand RemoveEquipmentCommand => new Command<MyModel>(ReMoveItem);

        private void ReMoveItem(MyModel obj)
        {
            System.Diagnostics.Debug.WriteLine(" the selected item's name  is:  " + obj.Name   );
             // Here we can remove the seletced obj from the data
             Data.Remove(obj);
        }

        public MyViewModel() {
            Data = new ObservableCollection<MyModel>();

            Data.Add(new MyModel { Name ="model_1", Car= new Vehicle {Make="Make1" } });
            Data.Add(new MyModel { Name = "model_2", Car = new Vehicle { Make = "Make2" } });
            Data.Add(new MyModel { Name = "model_3", Car = new Vehicle { Make = "Make3" } });
            Data.Add(new MyModel { Name = "model_4", Car = new Vehicle { Make = "Make4" } });

        }

        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

相关问题