wpf mvvm : Why duplicating model collections in view models when binding to a treeview? how to avoid it?

Question

I have a 2-levels hierarchy in my model composed of constellations and entities, hosted in a root object, and I want to show them in a TreeView.

Root object L Constellations L Entities

I have my RootObjectViewModel exposing my root object. In that, I fully agree with Bryan Lagunas in MVVM best practices, that the model object should be exposed by the view model instead of doing facade. Excellent video by the way, really worth the time.

I read everywhere that the TreeView.ItemsSource should be mapped to a collection of viewmodels, that is, for my collection of Constellation, my RootObjectViewModel should provide a collection of ConstellationViewModel. My concern is that if my collections of constellations, and entities within, are live, that is, if some items are added, changed (their order) or removed, I have to manually reflect those changes in my ViewModels' collections.

I would find it more elegant to map the ItemsSource to, say, the collection of Constellation itself, so that any change in the model is reflected without duplication, and then have some converter or so to map the TreeViewItems.DataContext to a ConstellationViewModel based on the constellation model.

If this is not clear enough, I can clarify this with some sample code.

Did anyone face the same question and/or try to implement this ?

Thanks you in advance for your help.

Cedric

Answer 1

It depends. If your model has exactly the properties the view needs, and the view can directly alter them when the user clicks around, it's fine to expose the model.

But if your model is, for example, read only and require calls to a service to apply changes, you have to wrap it in a view model to provide the view with writeable properties.

Answer 2

Got it working !

It is not possible out-of-the-box, and here's why:

---

It is possible to use model collections as items source, and to use a converter to get the appropriate view model it the components inside the TreeViewItem. But there isn't any way to interfere with the creation of TreeViewItem to apply the converter to its DataContext. Which means that the TreeViewItem's properties can't be binded to the ViewModel.

In other words :

• if you want to stick with the standard behavior of the TreeView and don't have to deal with the TreeViewItems properties, if either your collections don't change or can implement ICollectionChanged, and if your models don't change or can implement IPropertyChanged, it is fine to go with the model's collections.
• If any of these conditions is broken, then you will have to go with building ViewModel's collections and sync them with model's collection.

---

Now, I implemented a collection type named ConvertingCollection<Tin, Tout> that uses an original collection as an input and syncs its own contents with this input. This is just a basic class with many many ways of improvement, but it works. All you have to do is use this collection as a VM property, set the original collection and converter, and bind the ItemsSource to this collection.

Here's the full code:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Globalization;
using System.Windows.Data;

namespace TreeViewPOC
{
  class ConvertingCollection<Tin, Tout> : ObservableCollection<Tout>
  {
    private IValueConverter _converter;
    private bool _isObservableCollection;
    private IEnumerable<Tin> _originalCollection;
    private Dictionary<Tin, Tout> _mapping = new Dictionary<Tin, Tout>();


    public ConvertingCollection(IValueConverter converter)
    {
      // save parameters
      _converter = converter;
    }

    public ConvertingCollection(IEnumerable<Tin> originalCollection, IValueConverter converter)
    {
      // save parameters
      _converter = converter;
      OriginalCollection = originalCollection;
    }

    #region Properties
    public IEnumerable<Tin> OriginalCollection
    {
      get
      {
        return _originalCollection;
      }
      set
      {
        if (!value.Equals(_originalCollection))
        {
          // manage older collection
          if (_originalCollection != null && _isObservableCollection)
          {
            (_originalCollection as ObservableCollection<Tin>).CollectionChanged -= originalCollection_CollectionChanged;
            this.Clear();
          }

          _originalCollection = value;

          // setup original collection information.
          _isObservableCollection = _originalCollection is INotifyCollectionChanged;
          if (_originalCollection != null && _isObservableCollection)
          {
            (_originalCollection as INotifyCollectionChanged).CollectionChanged += originalCollection_CollectionChanged;
            foreach (Tin item in _originalCollection)
            {
              AddConverted(item);
            }
          }
        }
      }
    }

    #endregion
    /// <summary>
    /// Indicates the time in milliseconds between two refreshes.
    /// </summary>
    /// <notes>
    /// When the original collection isn't observable, it must be explored to reflect changes in the converted collection.
    /// </notes>
    // TODO
    //public int RefreshRate { get; set; } = 1000;

    /// <summary>
    /// Flushes the collection.
    /// </summary>
    public new void Clear()
    {
      _mapping.Clear();
      base.Clear();
    }

    #region Events management

    private void originalCollection_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
      switch (e.Action)
      {
        case NotifyCollectionChangedAction.Add:
          foreach (Tin item in e.NewItems)
          {
            AddConverted(item);
          }
          break;

        case NotifyCollectionChangedAction.Remove:
          foreach (Tin item in e.OldItems)
          {
            RemoveConverted(item);
          }
          break;
      }
    }
    #endregion

    #region Helpers
    /// <summary>
    /// Converts an item and adds it to the collection.
    /// </summary>
    /// <param name="item">The original item.</param>
    private void AddConverted(Tin item)
    {
      Tout converted = (Tout) _converter.Convert(item, typeof(Tout), null, CultureInfo.CurrentCulture);
      _mapping.Add(item, converted);
      this.Add(converted);
    }

    /// <summary>
    /// Removes a converted itemfrom the collection based on its original value.
    /// </summary>
    /// <param name="item">The original item.</param>
    private void RemoveConverted(Tin item)
    {
      this.Remove(_mapping[item]);
      _mapping.Remove(item);
    }
    #endregion
  }
}

I created a project on Github named MVVMTreeViewPOC to POC the idea. It is working fine, and it is a good tool to show the limitations.

Cedric.