Design time ItemsSource on ItemsControl

Question

I'm trying to design the DataTemplate for my ItemsControl and I need some mock data to populate the template. I read using d:DataContext is enough so that I don't have to create a mock class. How can I do this?

Supertax

Answer 1

The instance you have to use with d:DataContext must be declared in the XAML, with a StaticResource for example.

Here is how you could do it:

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns:local="clr-namespace:WpfApplication1"
             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">
    <UserControl.Resources>
        <local:MyViewModel x:Key="mockViewModel"/>
    </UserControl.Resources>
    <Grid>
        <ItemsControl d:DataContext="{StaticResource mockViewModel}" 
                      ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

The class I used as data context is defined as follows:

namespace WpfApplication1
{
    public class Item
    {
        public Item(string name)
        {
            Name = name;
        }

        public string Name { get; private set; }
    }

    public class MyViewModel
    {
        public List<Item> Items
        {
            get 
            {
                return new List<Item>() { new Item("Thing 1"), new Item("Thing 2") };
            }
        }
    }
}

Of course, you can also set the data context on the UserControl or on your Window.

Here's the result:

Hanshaw

I read that loading it as a resource will make the application also load it on run-time. I'm using d:DataContext="{d:DesignInstance Type=mocks:MyViewModelMock, IsDesignTimeCreatable=True} but it doesn't work – Supertax

@ChristopherFrancisco Using d:DesignInstance works too. Try to restart VS and rebuild your solution. The Designer is sometimes a little lazy with updating... – Hanshaw