How to update listView using MVVM pattern and ObservableCollection in WPF?

Question

I want to update a listview in UserControl included in MainWindow when adding/removing an entry over opening a Window.
When clicking the save button, nothing happens
Can anyone please help me to see, what I'm doing wrong?

Best regards
Imilio

What I have done:

XAML - MainWindow

C# - MainWindow

using Add_Edit_Delete.Usercontrol;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Add_Edit_Delete
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void User_Click(object sender, RoutedEventArgs e)
        {
            UserControl1 oUser = new UserControl1();
            Grid.SetColumn(oUser, 1);
            MainGrid.Children.Add(oUser);
        }
    }
}

XAML - UserControl1

C# - UserControl1

    using Add_Edit_Delete.ucWindow;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;

    namespace Add_Edit_Delete.Usercontrol
    {
        /// 
        /// Interaktionslogik für UserControl1.xaml
        /// 
        public partial class UserControl1 : UserControl
        {
            public UserControl1()
            {
                InitializeComponent();
            }


            private void Delete_Click(object sender, RoutedEventArgs e)
            {

            }

            private void Eddit_Click(object sender, RoutedEventArgs e)
            {

            }

            private void Add_Click(object sender, RoutedEventArgs e)
            {
                Window1 oAdd = new Window1();
                oAdd.Owner = Application.Current.MainWindow;
                oAdd.ShowDialog();
            }
        }
    }


**XAML - Window1**

C# - Window1

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Add_Edit_Delete.ucWindow
{
    /// 
    /// Interaktionslogik für Window1.xaml
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

UserModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Add_Edit_Delete.Model
{
    class UserModel
    {
        public int Id { get; set; }
        public string Firstname { get; set; }
        public string Lastname { get; set; }
    }
}

AddViewModel

using Add_Edit_Delete.Commands;
using Add_Edit_Delete.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Add_Edit_Delete.ViewModel
{
    class AddViewModel : INotifyPropertyChanged
    {
        public AddViewModel()
        {
            this.AddUserCommand = new DelegateCommand((o) =>
            {
                this.ListOfUser.Add(NewUser);
            });
        }

        UserModel newUser = new UserModel();
        public UserModel NewUser
        {
            get => newUser;
            set
            {
                if (newUser != value)
                {
                    newUser = value;
                    this.RaisePropertyChanged(nameof(NewUser));
                }
            }
        }

        private ObservableCollection listOfUser = new ObservableCollection();
        public ObservableCollection ListOfUser
        {
            get => listOfUser;
            set
            {
                if (listOfUser != value)
                {
                    listOfUser = value;
                    this.RaisePropertyChanged(nameof(ListOfUser));
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public DelegateCommand AddUserCommand { get; set; }
    }
}

UserViewModel

using Add_Edit_Delete.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Add_Edit_Delete.ViewModel 
{
    class UserViewModel : INotifyPropertyChanged
    {
        UserModel newUser = new UserModel();
        public UserModel NewUser
        {
            get => newUser;
            set
            {
                if (newUser != value)
                {
                    newUser = value;
                    this.RaisePropertyChanged(nameof(NewUser));
                }
            }
        }

        private ObservableCollection listOfUser = new ObservableCollection();
        public ObservableCollection ListOfUser
        {
            get => listOfUser;
            set
            {
                if (listOfUser != value)
                {
                    listOfUser = value;
                    this.RaisePropertyChanged(nameof(ListOfUser));
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

DelegationCommand

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace Add_Edit_Delete.Commands
{
    public class DelegateCommand : ICommand
    {


        readonly Action

Answer

Hi,
you add UserModel to ListOfUser in AddViewModel and show ListOfUser from UserViewModel. That are different lists.

Answer

As Peter said ,you could delete the DataContext in the xaml of Window1 and UserControl1. Then modify the code of UserControl1 as follows.

public partial class UserControl1 : UserControl  
     {  
         AddViewModel vm = new AddViewModel();  
         public UserControl1()  
         {  
             InitializeComponent();  
             this.DataContext=vm;  
         }  
     private void Add_Click(object sender, RoutedEventArgs e)  
         {  
             Window1 oAdd = new Window1();  
              oAdd.DataContext=vm;  
             oAdd.Owner = Application.Current.MainWindow;  
             oAdd.ShowDialog();  
         }  
     }

Then bind the ItemsSource for the ListView .
UserControl1.xaml:

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer

Hi,
you can simplified your code like this:

MainWindow:

XAML UserControl:

XAML Window1:

Code:

using System;  
using System.Collections.ObjectModel;  
using System.ComponentModel;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Input;  
using WpfControlLibrary094.Add_Edit_Delete.Commands;  
using WpfControlLibrary1;  

namespace WpfControlLibrary094.Add_Edit_Delete.ViewModel  
{  
  public class UserModel  
  {  
    static int number = 1;  
    public int Id { get; set; }  
    public string Firstname { get; set; }  
    public string Lastname { get; set; }  
    public UserModel Copy() => new UserModel() { Id = number++, Firstname = this.Firstname, Lastname = this.Lastname };  
  }  
  
  public class UserViewModel : INotifyPropertyChanged  
  {  
    public UserViewModel() => this.AddUserCommand = new DelegateCommand((o) => { this.ListOfUser.Add(NewUser.Copy()); });  
    public DelegateCommand AddUserCommand { get; set; }  
  
    public UserModel NewUser { get; set; } = new UserModel();  
  
    public ObservableCollection ListOfUser { get; set; } = new ObservableCollection();  
  
    public ICommand Cmd { get => new DelegateCommand(null, CmdExec); }  
  
    private void CmdExec(object obj)  
    {  
      switch (obj.ToString())  
      {  
        case "Add_Click":  
          Window094A oAdd = new Window094A();  
          oAdd.DataContext = this;  
          oAdd.Owner = Application.Current.MainWindow;  
          oAdd.ShowDialog();  
          break;  
        default:  
          break;  
      }  
    }  
  
    public event PropertyChangedEventHandler PropertyChanged;  
    private void RaisePropertyChanged(string propertyName) =>  
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
  }  
}  
  
namespace WpfControlLibrary094.Add_Edit_Delete.Commands  
{  
  public class DelegateCommand : ICommand  
  {  
    readonly Action

Answer

Hi @Peter Fleischer (former MVP) , your code works correctly. What am I doing wrong that I overwrite the previous items with the new one? I would like to avoid the copy method.
I would like to separate the contents of Usercontrol1 and Window1. as follows:

UserViewModel:

   using System.ComponentModel;  
    using System.Linq;  
    using System.Text;  
    using System.Threading.Tasks;  
    using System.Windows;  
    using System.Windows.Input;  
    using WPF_App.Commands;  
    using WPF_App.Model;  
    using WPF_App.ucWindow;  
      
    namespace WPF_App.ViewModel  
    {  
        public class UserViewModel  
        {  
            public ICommand Cmd { get => new DelegateCommand(null, CmdExec); }  
      
            private void CmdExec(object obj)  
            {  
                switch (obj.ToString())  
                {  
                    case "Add_Click":  
                        Window1 oAdd = new Window1();  
                        oAdd.DataContext = this;  
                        oAdd.Owner = Application.Current.MainWindow;  
                        oAdd.ShowDialog();  
                        break;  
                    case "Edit_Click":  
                        //TBD  
                        break;  
                    case "Delete_Click":  
                        //TBD  
                        break;  
                    default:  
                        break;  
                }  
            }  
        }  
    }

AddViewModel:

using System.Threading.Tasks;  
using System.Windows;  
using System.Windows.Input;  
using WPF_App.Commands;  
using WPF_App.Model;  
using WPF_App.ucWindow;  
  
namespace WPF_App.ViewModel  
{  
    public class AddViewModel : INotifyPropertyChanged  
    {  
        public AddViewModel() => this.AddUserCommand = new DelegateCommand((o) => { this.ListOfUser.Add(NewUser.Copy()); });  
        public DelegateCommand AddUserCommand { get; set; }  
  
        public UserModel NewUser { get; set; } = new UserModel();  
  
        public ObservableCollection ListOfUser { get; set; } = new ObservableCollection();  
  
        public event PropertyChangedEventHandler PropertyChanged;  
        private void RaisePropertyChanged(string propertyName) =>  
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
    }  
}

if I do that, I have the original problem again. Nothing happens when I click on the Save button!

Answer

Hi,
if you need to use separate ViewModels for UserControl and Window1 try this code:

namespace Add_Edit_Delete.ViewModel
{
  public class UserModel
  {
    public int Id { get; set; }
    public string Firstname { get; set; }
    public string Lastname { get; set; }
  }

  public class UserViewModel : INotifyPropertyChanged
  {
    public ObservableCollection ListOfUser { get; set; } = new ObservableCollection();
    public ICommand Cmd { get => new DelegateCommand(null, CmdExec); }

    private void CmdExec(object obj)
    {
      switch (obj.ToString())
      {
        case "Add_Click":
          Window094A oAdd = new Window094A();
          AddViewModel vm = new AddViewModel(this);
          oAdd.DataContext = vm;
          oAdd.Owner = Application.Current.MainWindow;
          oAdd.ShowDialog();
          break;
        default:
          break;
      }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }

  public class AddViewModel : INotifyPropertyChanged
  {
    public AddViewModel(UserViewModel vm)
    {
      mainVm = vm;
      this.AddUserCommand = new DelegateCommand((o) =>
      {
        mainVm.ListOfUser.Add(NewUser);
        NewUser = new UserModel();
        RaisePropertyChanged(nameof(NewUser));
      });
    }
    public DelegateCommand AddUserCommand { get; set; }

    private UserViewModel mainVm;

    public UserModel NewUser { get; set; } = new UserModel();

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

How to update listView using MVVM pattern and ObservableCollection in WPF?

10 answers