Home > OS >  How to delete selected Item from collection view in .net MAUI
How to delete selected Item from collection view in .net MAUI

Time:11-17

I have collection in my Child view.

 <CollectionView  SelectionMode="Single" SelectedItem="{Binding Source={Reference sideview}, Path=myViewModel.SelectedItem.FileName}"
                     ItemsSource="{Binding Source={x:Reference sideview}, Path=myViewModel.Items }" >
            <CollectionView.ItemTemplate>
            <DataTemplate >
                <Grid>
                <Label Text="{Binding FileName}"   VerticalOptions="Center"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

I want to delete selected item My parent view where I have delete button

      <Button x:Name="BTN_REMOVE_FILE"  Text="Remove" Command="{Binding DeleteCommand}" CommandParameter="{Binding SelectedItem}" >

I have created delete command in my viewmodel

   [RelayCommand]
    public void Delete(Data s)
    {
        if (Items.Contains(s)) {
            Items.Remove(s);
        }  
    }

and from view I have pass the command parameter from view like this

I also have created selectedItem in my view Model

 public Data selectedItem;
    public Data SelectedItem
    {
        get
        {
            return selectedItem;
        }
        set
        {
            if(selectedItem != value)
            {
                selectedItem = value;
            }
        }
    }`public MyViewModel()
    {

        Items = new ObservableCollection<Data>();
        selectedItem = new Data();
    }
    `
   

It is showing me exception like Parameter "parameter" (object) cannot be of type DemoApp.MVVM.ViewModel.MyViewModel, as the command type requires an argument of type DemoApp.MVVM.Model.Data. (Parameter 'parameter')

Tried to add this in my viewModel public Data Name { get; set; }

view <Button x:Name="BTN_REMOVE_FILE" Text="Remove" Command="{Binding DeleteCommand}" CommandParameter="{Binding Name}" >

CodePudding user response:

Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MyViewModel}}, Path=DeleteCommand}"

To clarify a bit:

You need to be inside of DataType (set to your CollectionView ItemTemplate) to use your:

{Binding .}

As CommandParameter.

And to be inside of such DataType, requires you to go up one level, so you find the path to your Command in your ViewModel.

CodePudding user response:

You can use the code below to delete the item in the collectionview.

In the Mainpage.xaml

<CollectionView ItemsSource="{Binding Products}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                
                    <StackLayout>
                        <Label Text="{Binding Name}" />
                        <Label Text="{Binding Price}" />
                        <Button Text="Remove" Clicked="Remove_Clicked" />
                    </StackLayout>
                
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

In the Mainpage.xaml.cs

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new ProductsViewModels();
        }
        public void Remove_Clicked(object sender, EventArgs e)
        {
            var button = sender as Button;
            var product = button.BindingContext as Products;
            var vm = BindingContext as ProductsViewModels;
            vm.RemoveCommand.Execute(product);
        }
    }

In the ViewModel

 internal class ProductsViewModels
    {
        public ObservableCollection<Products> Products
        {
            get;
            set;
        }
        public Command<Products> RemoveCommand
        {
            get
            {
                return new Command<Products>((Product) => {
                    Products.Remove(Product);
                });
            }
        }
        public ProductsViewModels()
        {
            Products = new ObservableCollection<Products> {
                new Products {
                    Name = "name1",
                        Price = 100
                },
                new Products {
                    Name = "name2",
                        Price = 100
                },
                new Products {
                    Name = "name3",
                        Price = 100
                }
            
            };
        }
    }

CodePudding user response:

create one property for selectedItem in viewmodel like below

ViewModel:

   public Data selectedItem;
    public Data SelectedItem
    {
        get
        {
            return selectedItem;
        }
        set
        {
            if(selectedItem != value)
            {
                selectedItem = value;
            }
        }
    }

and set that property in constructor 
   public MyViewModel()
    {

        Items = new ObservableCollection<Data>();
        SelectedItem = new Data();
    }
 and then for delete method directly pass the selected Item 
  public void Delete()
    {
        if (Items.Contains(SelectedItem))
            Items.Remove(SelectedItem);
    }

 In collection view bind the selectedItem property

My view:

   And this is where I have binded the command 

     <Button x:Name="BTN_REMOVE_FILE" ImageSource="remove_file.gif" Text="Remove"   Command="{Binding DeleteCommand}" MaximumHeightRequest="30" BorderColor="Transparent"  BackgroundColor="Transparent" Padding="5" TextColor="White" />
  
   
  • Related