UWP TreeView data binding and reflecting changes

Question

Does UWP TreeView reflect changes in items by dragging and droppping into it's associated ItemsSource from VM? For example, I associate TreeView with VM ObservableCollection list. When I add some items by executing command from VM that populate that collection with new items, they do show up in TreeView UI. However, if I drag and drop item inside TreeView, underlaying list does not change? What am I doing wrong? Should TreeView update and observable collection based on my actions?

Here is my VM:

public class MySampleViewModel : MyBase 
{
    public ObservableCollection<FolderInfo> storageFolders { get; set; } = new ObservableCollection<FolderInfo>();

    public ICommand MyCommand { get; }

    public ICommand ChangeCommand { get; }

    public MySampleViewModel()
    {
        AddFilesFolders();
    }

    private void AddFilesFolders()
    {
        FolderInfo ff1 = new FolderInfo();
        ff1.FolderName = "Folder " + DateTime.Now.ToString();
        ff1.IsFolder = true;
        ff1.subFolders = new ObservableCollection<FolderInfo>();

        storageFolders.Add(ff1);

        FolderInfo ffkeko = new FolderInfo();
        ffkeko.FolderName = "subitem" + DateTime.Now.ToString();
        ffkeko.subFolders = new ObservableCollection<FolderInfo>();

        ff1.subFolders.Add(ffkeko);

        FolderInfo ff = new FolderInfo();
        ff.FolderName = "servername " + DateTime.Now.ToString();
        ff.subFolders = new ObservableCollection<FolderInfo>();

        storageFolders.Add(ff);
    }
}

public class MyBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName]string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class FolderInfo : MyBase
{
    private string _FolderName;
    public string FolderName
    {
        get { return _FolderName; }
        set
        {
            if (_FolderName != value)
            {
                _FolderName = value;
                OnPropertyChanged("FolderName");
            }
        }
    }

    private bool _IsFolder;
    public bool IsFolder
    {
        get { return _IsFolder; }
        set
        {
            if (_IsFolder != value)
            {
                _IsFolder = value;
                OnPropertyChanged("IsFolder");
            }
        }
    }

    public ObservableCollection<FolderInfo> subFolders { get; set; } = new ObservableCollection<FolderInfo>();

    public override string ToString()
    {
        return FolderName;
    }
}

And here is my XAML for TreeView:

<localdata:MyTreeView 
x:Name="treeview" Grid.Row="2" ItemsSource="{Binding storageFolders,Mode=OneWay}" 
Style="{StaticResource TreeViewStyle1}"
/>

Martin Zikmund Martin Zikmund · Accepted Answer · 2019-06-03T15:05:48

The problem is that you are actually assigning a new ObservableCollection<FolderInfo> instance to the subFolders property when there is a change, but data binding is bound to the previous instance, so it does not observe this change. There are two solutions to this problem:

1) Change the instance and raise PropertyChanged event:

private ObservableCollection<FolderInfo> _subFolders = new ObservableCollection<FolderInfo>();
public ObservableCollection<FolderInfo> subFolders
{
   get => _subFolders;
   set
   {
      _subFolders = value;
      OnPropertyChanged();
   }
}

2) Instead of assigning a new instance, clear the original one and just add new items:

So instead of:

ff.subFolders = new ObservableCollection<FolderInfo>();
ff.subFolders.Add(something);

You will do:

ff.subFolders.Clear();
ff.subFolders.Add(something);

UWP TreeView data binding and reflecting changes

1 Answers