Software and UX

Recently, I have been trying to populate my WPF design-time controls with mock data in order to have real-time feedback of the UI, as I am tweaking the XAML. I first saw this in action at a session with Richard Griffin, Felix Corke, and Ian Griffiths at Tech Ed Barcelona 2008, and I was blown away by the prospects of it. This has been the Holy Grail of form design for me, ever since the first releases of Visual Studio came out (think Win32, MFC, Windows Forms), and now it seemed Microsoft nailed it! The gang even got this working with an IoC container! This was a Silverlight project though, and not WPF, so I wasn’t sure how easy it would be to transition the same experience.

After a few tries, and looking at articles like this one and this one, it seemed that the road was going to be a bumpy one. Even though I got it working with Expression Blend initially, it seemed much harder to get it to work consistently under the Visual Studio 2008 designer (Cider). In this blog post, I will outline the gotchas I have found along the way to a solution that works both in Expression Blend 2 SP1 and Visual Studio 2008 SP1, without modification:

The solution I am using involves creating a ServiceLocator object, which exposes my ViewModels as properties:

public class ServiceLocator
{
    static ServiceLocator()
    {
        SingletonContainer.Setup(new NinjectContainerAbstraction());
    }

    public IMainViewViewModel MainWindowViewModel
    {
        get { return SingletonContainer.Resolve<IMainViewViewModel>(); }
    }
}

After adding it to my App.xaml file:

<Application.Resources>
  <local:ServiceLocator x:Key="serviceLocator" />
</Application.Resources>

… I can then bind to a ViewModel like this:

<UserControl.DataContext>
  <Binding Path="MainWindowViewModel" Source="{StaticResource serviceLocator}"/></UserControl.DataContext>

I am then able to start using the ViewModel directly on the XAML:

<Label Content="{Binding Path=CurrentSprintName}">

The serviceLocator will be configured with the design-time mock data, or the run-time data, depending on whether we’re hosted inside a designer. This check is accomplished through DesignerProperties.GetIsInDesignMode. However, as noted in Delay’s Blog, there is a bug in that implementation, so I’m using his recommended workaround.

This should be enough to get the data to show up in Blend. And this is what a lot of articles floating on the Internet will tell you. However, as you will find in part II of this installment, VS2008 is much pickier in what it decides to chew up.