WPF & MVVM, design time data in Window, but not child UserControl - wpf

Question

In Visual Studio 2013 (fully updated) and Blend 2013, I am not seeing design time data in my UserControl, but I am seeing design time data in the Window that has the UserControl. What follows is a simplified demo of my problem.
The model (color.cs):
using System;
namespace TestWPF {
public class color {
public string name { get; set; }
}
}
The ModelView (colorViewModel.cs):
using System;
using System.Collections.Generic;
namespace TestWPF
{
public class colorViewModel
{
public List<color> colorList;
public colorViewModel()
{
colorList = new List<color>();
colorList.Add(new color() { name = "blue" });
colorList.Add(new color() { name = "red" });
}
}
}
The UserControl code-behind (colorUserControl.xaml.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestWPF
{
public partial class colorUserControl : UserControl
{
public colorUserControl()
{
InitializeComponent();
this.DataContext = (new colorViewModel()).colorList;
}
}
}
The UserControl XAML (colorUserControl.xaml):
<UserControl x:Class="TestWPF.colorUserControl"
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="300" d:DesignWidth="300">
<Grid>
<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="True" />
</Grid>
</UserControl>
The Window XAML (MainWindow.xaml):
<Window x:Class="TestWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:view="clr-namespace:TestWPF">
<Grid>
<view:colorUserControl />
</Grid>
</Window>
The Window gets design time data:
But not the UserControl:
How do I get my UserControl to show design time data?

Answer 1

The problem you are having is that you are not actually using design-time data, even in your main window.
When using design-time data, you have two options:
DesignInstance - This is used to help with shaping your datacontext. It will offer you intellisense support with the binding paths.
DesignData - This will let you choose a xaml resource which represents your datacontext with actual sample data.
Unfortunately, you must only select one (they cannot coexist).
Some good resources are listed below:
http://www.arrangeactassert.com/how-to-use-a-designinstance-to-populate-controls-with-design-time-data-in-silverlight-and-wpf/
http://jack.ukleja.com/ddesigninstance-in-depth/
http://karlshifflett.wordpress.com/2009/10/28/ddesigninstance-ddesigndata-in-visual-studio-2010-beta2/