What approaches are available to dummy design-time data in WPF?

Question

I am working without expression blend and just using the XAML editor in vs2010. The wisdom of this aside, I am increasingly seeing a need for design-time data binding. For simple cases, the FallbackValue property works very nicely (Textboxes and TextBlocks, etc). But especially when dealing with ItemsControl and the like, one really needs sample data to be visible in the designer so that you can adjust and tweak controls and data templates without having to run the executable.

I know that ObjectDataProvider allows for binding to a type, and thus can provide design-time data for visualizing, but then there is some juggling to allow for the real, run-time data to bind without wasting resources by loading loading both the design time, dummied data and the runtime bindings.

Really what I am wanting is the ability to have, say, "John", "Paul", "George", and "Ringo" show up in the XAML designer as stylable items in my ItemsControl, but have real data show up when the application runs.

I also know that Blend allows for some fancy attributes that define design time binding data that are effectively ignored by WPF in run-time conditions.

So my questions are:

1. How might I leverage design-time bindings of collections and non-trivial data in the visual studio XAML designer and then swap to runtime bindings smoothly?

2. How have others solved this design-time vs. runtime data problem? In my case, i cannot very easily use the same data for both (as one would be able to with, say, a database query).

3. Are their alternatives to expression blend that i could use for data-integrated XAML design? (I know there are some alternatives, but I specifically want something I can use and see bound sample data, etc?)

Answer 1

Using VS2010 you can use Design-Time attributes (works for both SL and WPF). I usually have a mock data-source anyway so it's just a matter of:

• Adding the namespace declaration

  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  

• Adding the mock data context to window/control resources

  <UserControl.Resources>
    <ViewModels:MockXViewModel x:Key="DesignViewModel"/>
  </UserControl.Resources>
  

• Setting design-time data context

  <Grid d:DataContext="{Binding Source={StaticResource DesignViewModel}}" ...
  

Works well enough.

Answer 2

As an amalgam of Goran's accepted answer and Rene's excellent comment.

• Add the namespace declaration. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

• Reference your design time data context from code.
  <Grid d:DataContext="{d:DesignInstance Type=ViewModels:MockXViewModel, IsDesignTimeCreatable=True}" ...

Answer 3

I use this approach for generating design time data with .NET 4.5 and Visual Studio 2013.

I have just one ViewModel. The view model has a property IsInDesignMode which tells whether design mode is active or not (see class ViewModelBase). Then you can set up your design time data (like filling an items control) in the view models constructor.

Besides, I would not load real data in the view models constructor, this may lead to issues at runtime, but setting up data for design time should not be a problem.

public abstract class ViewModelBase
{
    public bool IsInDesignMode
    {
        get
        {
            return DesignerProperties.GetIsInDesignMode(new DependencyObject());
        }
    }
}

public class ExampleViewModel : ViewModelBase
{
    public ExampleViewModel()
    {
        if (IsInDesignMode == true)
        {
            LoadDesignTimeData();
        }
    }

    private void LoadDesignTimeData()
    {
        // Load design time data here
    }       
}