Getting Silverlight MVVM working with Expression Blend design time data?

Question

I am a big proponent of the MVVM pattern with Silverlight. Currently I wire the ViewModel up to the View by newwing up the ViewModel in the code behind of the view, thusly:

public partial class SomePage : UserControl
{
    public SomePage()
    {
        InitializeComponent();

        // New up a ViewModel and bind to layout root
        var vm = new SomeViewModel();
        LayoutRoot.DataContext = vm;
    }
}

And then all the binding is handled in the View and all the logic is handled in the ViewModel, as the pattern intends.

However, wiring them up this way means that the designer doesn't work well, and I can't use Expression Blend design time data. I know that there are libraries such as MVVM Light that will help to get all this working, but I prefer not to bring in a library, as it is "one more thing" to have to deal with.

Is there a simple pattern for getting MVVM wired up in Silverlight while maintaining designer functionality, especially in Blend? I've done some Googling but there are so many outdated articles out there and so much confusion between WPF and Silverlight and older versions that I have a hard time figuring out which to use.

BTW I'm focused on SL4 with VS2010 if it matters.

Jeremy Likness Jeremy Likness · Accepted Answer · 2010-07-28T21:23:14

There are a few methods you can use.

First, let Expression's Sample Data and design-time attributes (i.e. d:DataContext) take over in the designer. In your code, you would simply condition the view model binding:

if (!DesignerProperties.IsInDesignTool)
{
   var vm = new SomeViewModel();
   LayoutRoot.DataContext = vm; 
}

Second, you can have a special design-time view model that you bind instead:

LayoutRoot.DataContext = DesignerProperties.IsInDesignTool ?
    new DesignViewModel() : new MyViewModel();

Finally, another way is to manage the data within the view model. I don't like this because it spreads the responsibility across all view models, but you have more precision:

// constructor
private Widget[] _designData = new[] { new Widget("Test One"), new Widget("Test Two") };

public MyViewModel()
{
   if (DesignerProperties.IsInDesignTool)
   {
       MyCollection = new ObservableCollection<Widget>(_designData);       
   }
   else 
   {
       MyService.Completed += MyServiceCompleted;
       MyService.RequestWidgets();
   }
}

private void MyServiceCompleted(object sender, AsynchronousEventArgs ae)
{
   // load up the collection here
}

Hope that helps!

Getting Silverlight MVVM working with Expression Blend design time data?

3 Answers