Question

I am getting started with MVVM (using Caliburn.Micro) and have come across an issue which I’m not sure if I’m doing this correctly. I have a model MediaCacherConfig which represents a textfile that stores the data in json format. The model contains 2 lists of strings and one string by itself.

What I am struggling with is how to correctly set up the viewmodel and in particular the AddNewFolder() method. I’m not sure if I am raising the correct event and whether the viewmodel’s representation is correct. I can see how to bind to a simple property, but binding to a collection seems a bit more of a head spinner as I am creating a whole new collection everytime an item (string) is added.

Furthermore, when I load an entirely new model I have to run the NotifyPropertyChanged() method on all the properties which doesn’t make sense to me.

Any guidance is much appreciated.

public class MediaCacherConfig : IConfig
{

    public string DatabaseFileName { get; set; }

    public ICollection<string> FoldersToScan { get; set; }

    public ICollection<string> ExtensionsToIgnore { get; set; }

}

I have a viewmodel MediaCacherConfigViewModel:

    public class MediaCacherConfigViewModel : PropertyChangedBase
{

    private MediaCacherConfig Model { get; set; }

    public string DatabaseFileName
    {
        get { return Model.DatabaseFileName; }
        set
        {
            Model.DatabaseFileName = value;
            NotifyOfPropertyChange(() => DatabaseFileName);
        }
    }

    public BindableCollection<string> FoldersToScan
    {
        get
        {
            return new BindableCollection<string>(Model.FoldersToScan);
        }
        set
        {
            Model.FoldersToScan = value;
            NotifyOfPropertyChange(() => FoldersToScan);
        }
    }

    public BindableCollection<string> ExtensionsToIgnore
    {
        get
        {
            return new BindableCollection<string>(Model.ExtensionsToIgnore);
        }
        set
        {
            Model.ExtensionsToIgnore = value;
            NotifyOfPropertyChange(() => ExtensionsToIgnore);
        }
    }

    /* Constructor */
    public MediaCacherConfigViewModel()
    {
        LoadSampleConfig();
    }

    /* Methods */
    public void LoadSampleConfig()
    {

        MediaCacherConfig c = new MediaCacherConfig();

        string sampleDatabaseFileName = "testing.config";

        List<string> sampleFoldersToScan = new List<string>();
        sampleFoldersToScan.Add("A");
        sampleFoldersToScan.Add("B");
        sampleFoldersToScan.Add("C");

        List<string> sampleExtensionsToIgnore = new List<string>();
        sampleExtensionsToIgnore.Add("txt");
        sampleExtensionsToIgnore.Add("mov");
        sampleExtensionsToIgnore.Add("db");
        sampleExtensionsToIgnore.Add("dat");

        c.DatabaseFileName = sampleDatabaseFileName;
        c.FoldersToScan = sampleFoldersToScan;
        c.ExtensionsToIgnore = sampleExtensionsToIgnore;

        Model = c;

        NotifyOfPropertyChange(() => DatabaseFileName);
        NotifyOfPropertyChange(() => FoldersToScan);
        NotifyOfPropertyChange(() => ExtensionsToIgnore);


    }

    public void AddNewFolder()
    {
        Model.FoldersToScan.Add("new one added");
        NotifyOfPropertyChange(() => FoldersToScan);

    }

    public void SaveConfig()
    {
        ConfigTools.Configure(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData), "Cacher", "Config"));

        ConfigTools.SaveConfig(Model,"sampleconfig.txt");              
    }

    public void LoadConfig()
    {
        ConfigTools.Configure(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData), "Cacher", "Config"));

        MediaCacherConfig m = ConfigTools.LoadConfig<MediaCacherConfig>("sampleconfig.txt") as MediaCacherConfig;
        Model = m;


        NotifyOfPropertyChange(() => DatabaseFileName);
        NotifyOfPropertyChange(() => FoldersToScan);
        NotifyOfPropertyChange(() => ExtensionsToIgnore);

    }
}

And here is my view:

<UserControl x:Class="MediaCacher.Views.MediaCacherConfigView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="413" Width="300">
<Grid MinWidth="300" MinHeight="300" Background="LightBlue" Margin="0,0,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="409*"/>
        <RowDefinition Height="4*"/>
    </Grid.RowDefinitions>
    <TextBox x:Name="DatabaseFileName" TextWrapping="Wrap" Margin="10,64,10,0" HorizontalAlignment="Center" Width="280" Height="42" VerticalAlignment="Top"/>
    <ListBox x:Name="FoldersToScan" HorizontalAlignment="Left" Height="145" Margin="10,111,0,0" VerticalAlignment="Top" Width="280"/>
    <ListBox x:Name="ExtensionsToIgnore" HorizontalAlignment="Left" Height="145" Margin="10,261,0,0" VerticalAlignment="Top" Width="280"/>
    <Button x:Name="AddNewFolder" Content="Add" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="87" Height="49"/>
    <Button x:Name="LoadConfig" Content="Load" HorizontalAlignment="Left" Margin="102,10,0,0" VerticalAlignment="Top" Width="96" Height="49"/>
    <Button x:Name="SaveConfig" Content="Save" HorizontalAlignment="Left" Margin="203,10,0,0" VerticalAlignment="Top" Width="87" Height="49"/>
</Grid>

Answer 1

First, here you are returning a brand new collection every time, so obviously nothing gets persisted.

 public BindableCollection<string> FoldersToScan
    {
        get
        {
            return new BindableCollection<string>(Model.FoldersToScan);
        }
        set
        {
            Model.FoldersToScan = value;
            NotifyOfPropertyChange(() => FoldersToScan);
        }
    }

Secondly, your AddFolder method should belong in your ViewModel. When you Add a string to your already existing collection the fact that it is a BindingCollection should fire off an event to your View automatically that a new Item was added.

---

This is how I would do it. This is obviously an example for demonstration purposes, please add everything else you need. Youd ideall want to pass EventArgs and note I am not implementing INotifyPorpertyChanged because I don’t have time to write it all out. Also I am using ObservableCollection but you can use your BindableCollection.

The point of this example is to show you how to manage your ViewModel – > Model communcation. Technically speaking your View -> ViewModel should talk through a CommandPattern.

public class YourViewModel
    {
        private readonly YourModel model;
        private ObservableCollection<string> foldersToScan = new ObservableCollection<string>();
        public ObservableCollection<string> FoldersToScan
        {
            get { return this.foldersToScan; }
        }

        public YourViewModel(YourModel model)
        {
            this.model = model;
            this.model.OnItemAdded += item => this.foldersToScan.Add(item);
        }

        public void AddFolder(string addFolder) //gets called from view
        {
            this.model.AddFolder(addFolder); //could be ICommand using Command Pattern
        }
    }

    public class YourModel
    {
        private readonly List<string> foldersToScan;
        public IEnumerable<string>  FoldersToScan
        {
            get { return this.foldersToScan; }
        }


        public event Action<string> OnItemAdded; 

        public YourModel()
        {
            this.foldersToScan = new List<string>();
        }

        public void AddFolder(string folder)
        {
            this.foldersToScan.Add(folder);
            this.RaiseItemAdded(folder);
        }

        void RaiseItemAdded(string folder)
        {
            Action<string> handler = OnItemAdded;
            if (handler != null) handler(folder);
        }
    }