Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Grouped ListView not binding delete Command using MVVM

Hi everyone,
I'm getting crazy trying to bind a Command in order to remove an item from a grouped ListView.
My ViewModels inherit from a BaseViewModel in order to ease the notification of a changing property.
I followed the common approach that seems to be the correct one by using two ObservableCollections.

Those are my ViewModels, that are displayed correctly, but I cannot bind the RemoveCommand to each item (of type ArticleForOrdineOTIVM). I used the constructor for creating dummy objects.
I tried every sort of combination in my xaml file within Command="", for example by pointing Source reference to the listview name, but I can't make it work. It always says like i cannot reach the scope of the inner Context, but at most I can bind a command within OrderOTIVM, no further (for example the Command "TestCommand"). I need to do this because I want to remove, edit and do stuff inside each item of the list, and the error explained before says:

Binding: 'RemoveCommand' property not found on 'System.Collections.ObjectModel.ObservableCollection`1[BrScanner.ViewModels.GroupedArticlesVM]', target property: 'Xamarin.Forms.Button.Command'

In the View file I set the BindingContext as:

public partial class OrderOTIView : ContentPage
    {
        public OrderOTIView()
        {
                InitializeComponent();
        OrderOTIVM orderOTIViewModel = new OrderOTIVM();
            BindingContext = orderOTIViewModel;
        }
    }

These are my ViewModels:

public class OrderOTIVM : BaseViewModel
    {
        ObservableCollection<GroupedArticlesVM> _carrelliGrouped;
        public ObservableCollection<GroupedArticlesVM> CarrelliGrouped { get => _carrelliGrouped; set {  _carrelliGrouped = value; OnPropertyChanged();}
        }

        public OrderOTIVM()
        {
            CarrelliGrouped = new ObservableCollection<GroupedArticlesVM>();
            GroupedArticlesVM car1 = new GroupedArticlesVM();
            car1.Carrello.Nome = "Carrello A";
            CarrelliGrouped.Add(car1);

            GroupedArticlesVM car2 = new GroupedArticlesVM();
            car2.Carrello.Nome = "Carrello B";
            CarrelliGrouped.Add(car2);

        }
    public Command TestCommand
            {
                get
                {
                    return new Command(
                        (x) => {
                            Debug.WriteLine("TestCommand");
                        });
                }
            }
    }

    public class GroupedArticlesVM :  ObservableCollection<ArticleForOrdineOTIVM>
    {
        CarrelloMinimarketVM _carrello;
        public CarrelloMinimarketVM Carrello { get => _carrello; set { _carrello = value; } }

        public GroupedArticlesVM()
        {
            Items.Add(new ArticleForOrdineOTIVM());
            Items.Add(new ArticleForOrdineOTIVM());
            Items.Add(new ArticleForOrdineOTIVM());
            Items.Add(new ArticleForOrdineOTIVM());

            Carrello = new CarrelloMinimarketVM();
        }


        public Command<ArticleForOrdineOTIVM> RemoveCommand
        {
            get
            {
                return new Command<ArticleForOrdineOTIVM>(
                    (articolo)=>{
                        Items.Remove(articolo);
                });
            }
        }

    }

    public class CarrelloMinimarketVM : BaseViewModel
    {
        string _nome;

        public CarrelloMinimarketVM()
        {
            this.Nome = "CARRELLO";
        }

        public string Nome { get => _nome; set { _nome = value; OnPropertyChanged(); } }
    }

    public class ArticleForOrdineOTIVM : BaseViewModel
    {
        string _oarti;
        string _tarti;
        int _amount;

        public string Oarti { get => _oarti;    set {   _oarti = value;     OnPropertyChanged(); } }
        public string Tarti { get => _tarti;    set {   _tarti = value;     OnPropertyChanged(); } }
        public int Amount { get => _amount;     set {   _amount = value;    OnPropertyChanged(); } }

        public ArticleForOrdineOTIVM()
        {
            this.Oarti = "Oarti blabla";
            this.Tarti = "Descrizione blabla";
            this.Amount = 22;
        }  
    }

This is my Xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<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"
             mc:Ignorable="d"
             x:Class="BrScanner.Views.OrderOTIView"
             x:Name="OrderOTIPage"
             >
            <ListView x:Name="carrelliListView" ItemsSource="{Binding CarrelliGrouped}"
                      HasUnevenRows="True"
                      GroupDisplayBinding="{Binding Carrello.Nome}"
                      IsGroupingEnabled="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="10">
                                <Label Text="{Binding Oarti}"/>
                                <Label Text="{Binding Tarti}"/>
                                <Button Text="cancella" 

                                        Command="{Binding Path=BindingContext.CarrelliGrouped.RemoveCommand, Source={x:Reference Name=OrderOTIPage}}"
                                        CommandParameter="{Binding .}"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

My BaseViewModel:

public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Thanks for your time!

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    Binding: 'RemoveCommand' property not found on 'System.Collections.ObjectModel.ObservableCollection`1[BrScanner.ViewModels.GroupedArticlesVM]', target property:

    The binding value of the following code is an 'ObservableCollection', we cannot get a property from the observableCollection.

    <Button Text="cancella" 
            Command="{Binding Path=BindingContext.CarrelliGrouped.RemoveCommand, Source{x:Reference Name=OrderOTIPage}}"
            CommandParameter="{Binding .}"/>
    

    Try to move the 'RemoveCommand' to the 'OrderOTIVM' class like the 'TestCommand'.

Sign In or Register to comment.