C# WPF Nested List in MVVM

Question

I'd like to use a nested ObservableCollection in MVVM in order to add as many groups and users as possible. However, I don't know how to create/add a new user. I also don't know how to bind the new users to the XAML. (NOTE: this time, I just need two persons.)

I'm new to C#, WPF and MVVM. I'm learning MVVM referring to this site: https://riptutorial.com/wpf/example/992/basic-mvvm-example-using-wpf-and-csharp I've been trying this since last week, but no luck.

I tried:

        outerObservableCollection.Add(
            new ObservableCollection
            {
                {
                    FirstName = "Jane",
                    LastName  = "June",
                    BirthDate = DateTime.Now.AddYears(-20)
                }
            }
        );

... which ends up with the following error:

The name 'BirthDate' does not exist in the current context

(I guess the cause of this issue is that I didn't create a 'user' object, so 'user.BirthDate' is not accessible.)

Let me show the entire codes.

MainWindow.xaml:

MainWindow.xaml.cs:

using System.Windows;

namespace MVVM_RIP_Tutorial
{
    public partial class MainWindow : Window
    {
        private readonly MyViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new MyViewModel();
            // The DataContext serves as the starting point of Binding Paths
            DataContext = _viewModel;
        }
    }
}

User.cs:

using System;

namespace MVVM_RIP_Tutorial
{
    sealed class User
    {
        public string FirstName { get; set; }

        public string LastName { get; set; }

        public DateTime BirthDate { get; set; }
    }
}

MyViewModel.cs:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace MVVM_RIP_Tutorial
{
    // INotifyPropertyChanged notifies the View of property changes, so that Bindings are updated.
    sealed class MyViewModel : INotifyPropertyChanged
    {
        private User user;

        ObservableCollection> outerObservableCollection 
            = new ObservableCollection>();
        //ObservableCollection user = new ObservableCollection();

        public string FirstName
        {
            get { return user.FirstName; }
            set
            {
                if (user.FirstName != value)
                {
                    user.FirstName = value;
                    OnPropertyChange("FirstName");
                    // If the first name has changed, the FullName property needs to be udpated as well.
                    OnPropertyChange("FullName");
                }
            }
        }

        public string LastName
        {
            get { return user.LastName; }
            set
            {
                if (user.LastName != value)
                {
                    user.LastName = value;
                    OnPropertyChange("LastName");
                    // If the first name has changed, the FullName property needs to be udpated as well.
                    OnPropertyChange("FullName");
                }
            }
        }

        // This property is an example of how model properties can be presented differently to the View.
        // In this case, we transform the birth date to the user's age, which is read only.
        public int Age
        {
            get
            {
                DateTime today = DateTime.Today;
                int age = today.Year - user.BirthDate.Year;
                if (user.BirthDate > today.AddYears(-age)) age--;
                return age;
            }
        }

        // This property is just for display purposes and is a composition of existing data.
        public string FullName
        {
            get { return FirstName + " " + LastName; }
        }

        public MyViewModel()
        {
            user = new User
            {
                FirstName = "John",
                LastName = "Doe",
                BirthDate = DateTime.Now.AddYears(-30)
            };

            //outerObservableCollection.Add(user);

        //outerObservableCollection.Add(
        //    new ObservableCollection
        //    {
        //        {
        //            FirstName = "Jane",
        //            LastName  = "June",
        //            BirthDate = DateTime.Now.AddYears(-20)
        //        }
        //    }
        //);
            );
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

... Please help me. Thank you in advance.

coding.monkey · Accepted Answer

First of all, welcome to C#, WPF, and MVVM!

From your description it sounds like you would like to display a tree of users within groups... with that in mind, you could implement something like this to accomplish that goal:

Models

public class GroupModel
{
    public GroupModel(uint id, string name)
    {
        Id = id;
        Name = name;
    }

    public uint Id { get; }
    public string Name { get; }
}

public class UserModel
{
    public UserModel(uint id, string firstName, string surname, DateTime dateOfBirth)
    {
        Id = id;
        FirstName = firstName;
        Surname = surname;
        DateOfBirth = dateOfBirth;
    }

    public uint Id { get; }
    public string FirstName { get; }
    public string Surname { get; }
    public DateTime DateOfBirth { get; }
}

ViewModels

Base classes

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

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

public abstract class ViewModelBase : ViewModelBase
    where TModel : class
{
    private TModel _model;

    public ViewModelBase(TModel model)
        => _model = model;

    /*
     * There is a design choice here to allow the model
     * to be swapped at runtime instead or to treat the
     * view model as immutable in which case the setter
     * for the Model property should be removed.
     */
    public TModel Model
    {
        get => _model;
        set
        {
            if (ReferenceEquals(_model, value))
            {
                return;
            }

            _model = value;
            OnPropertyChanged();
        }
    }
}

Concrete classes

public class GroupViewModel : ViewModelBase
{
    public GroupViewModel(GroupModel model)
        : base(model)
    {
    }

    public ObservableCollection Users { get; }
        = new ObservableCollection();

    public void AddUser(UserModel user)
    {
        var viewModel = new UserViewModel(user);
        Users.Add(viewModel);
    }
}

public class UserViewModel : ViewModelBase
{
    public UserViewModel(UserModel model)
        : base(model)
    {
    }

    // convenience property; could be done completely in XAML as well
    public string FullName => $"{Model.FirstName} {Model.Surname}";
}

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        // create sample user groups
        for (var groupIndex = 1u; groupIndex <= 5u; ++groupIndex)
        {
            var groupName = $"Group {groupIndex}";
            var groupModel = new GroupModel(groupIndex, groupName);
            var groupViewModel = new GroupViewModel(groupModel);

            UserGroups.Add(groupViewModel);

            for (var userIndex = 1u; userIndex <= 5u; ++userIndex)
            {
                var userModel = new UserModel(
                    id: userIndex,
                    firstName: "John",
                    surname: $"Smith",
                    dateOfBirth: DateTime.Today);

                groupViewModel.AddUser(userModel);
            }
        }
    }

    public ObservableCollection UserGroups { get; }
        = new ObservableCollection();
}

View

Here's what you end up with:

There are lots of frameworks that take care of a lot of the tedious work of working with the MVVM pattern (e.g. removing most/all of the boilerplate code for INotifyPropertyChanged). Here are just a few to look at:

Some additional resources that might also be useful:

C# WPF Nested List in MVVM

Answers (2)

Models

ViewModels

View

Related Questions