silverlightwindows-phone-7mvvm-lightdesign-time-data

Design Time Data with MVVM light


I am using Visual Studio to create a notebook app for WP7 with the MVVM light toolkit. I'd like design-time data, but it doesn't show. It works at runtime, the implementation is exactly the same (DesignNoteDataService = NoteDataService) at the moment (I don't have a real datasource yet).

What am I doing wrong?

DesignNoteDataService (& NoteDataService)

public class DesignNoteDataService : INoteDataService
{
    private List<Note> _noteList;

    private void InitNotes()
    {
        _noteList = new List<Note>();
        _noteList.Add(new Note(0, "Zahnarzt", "Zahnarzt morgen", Color.FromArgb(50, 20, 150, 50)));
        _noteList.Add(new Note(0, "Party", "Sarah 7 Jahre", Color.FromArgb(50, 200, 10, 50)));
        _noteList.Add(new Note(0, "Arbeit", "Projekt abgabe", Color.FromArgb(50, 20, 150, 50)));
        _noteList.Add(new Note(0, "Meeting", "Abend Hotel @ Olten", Color.FromArgb(50, 20, 150, 50)));
    }

    void INoteDataService.GetNoteList(Action<List<Note>, Exception> callback)
    {
        if (_noteList == null)
            InitNotes();
        callback(_noteList, null);
    }

    void INoteDataService.GetNoteById(Action<Note, Exception> callback, int id)
    {
        if (_noteList == null)
        {
            InitNotes();
        }
        var item = (from n in _noteList
                    where n.Id.Equals(id)
                    select n).First();
        callback(item, null);
    }
}

MainViewModel

public class MainViewModel : ViewModelBase
{
    private readonly INoteDataService _dataService;

    /// <summary>
    /// The <see cref="WelcomeTitle" /> property's name.
    /// </summary>
    public const string NoteListPropertyName = "NoteList";

    private ObservableCollection<Note> _noteList;

    /// <summary>
    /// Gets the WelcomeTitle property.
    /// Changes to that property's value raise the PropertyChanged event. 
    /// </summary>
    public ObservableCollection<Note> NoteList
    {
        get
        {
            return _noteList;
        }

        set
        {
            if (_noteList == value)
            {
                return;
            }

            _noteList = value;
            RaisePropertyChanged(NoteListPropertyName);
        }
    }

    /// <summary>
    /// Initializes a new instance of the MainViewModel class.
    /// </summary>
    public MainViewModel(INoteDataService dataService)
    {
        _dataService = dataService;
        NoteList = new ObservableCollection<Note>();
        _dataService.GetNoteList(
            (item, error) =>
            {
                if (error != null)
                {
                    return;
                }
                foreach (var note in item)
                {
                    NoteList.Add(note);
                }
            });
    }

Binding in MainPage.xaml

 <ListBox ItemsSource="{Binding NoteList}"/>

Part of ViewModelLocator

        if (ViewModelBase.IsInDesignModeStatic)
        {
            SimpleIoc.Default.Register<INoteDataService, Design.DesignNoteDataService>();
        }
        else
        {
            SimpleIoc.Default.Register<INoteDataService, NoteDataService>();
        }

Solution

  • You, most likely, need to set the DataContext in your view. Normally you do this using a view locator (see MVVM Light web site or here for a sample).

    Alternatively you can set the DataContext in the constructor of your view, although, you loose "Blendability".

    Oh yes, you obviously need to set (inject) the correct data service.