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

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:

1. DesignInstance - This is used to help with shaping your datacontext. It will offer you intellisense support with the binding paths.
2. 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/