Design time data for datatemplate in xaml

Question

This may be a stupid question, but is it possible to define some sample data as DataContext in order to see my DataTemplate in DesignView?

At the moment I always have to run my application to see whether my changes are working.

E.g. with the following code DesignView just shows an empty list box:

 <ListBox x:Name="standardLayoutListBox" ItemsSource="{Binding myListboxItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Label Grid.Column="0" Content="{Binding text1}" />
                <Label Grid.Column="1" Content="{Binding text2}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Please see the solutions presented in this post: http://stackoverflow.com/questions/1889966/what-approaches-are-available-to-dummy-design-time-data-in-wpf — Joe Mancuso, Oct 13 '11 at 12:12
I read many samples for this by now, but I'm really not able to get this simple Listbox be filled at design time. I'm sure I'm missing something, but I can't find out what. Is it possible for you to provide a working sample for my listbox? — MTR, Oct 13 '11 at 13:21
I have it running now, but I don't know why:-( For those interested, this sample helped a great deal: http://www.st-lange.net/post/Silverlight-Tipp-der-Woche-Design-Time-Data-verwenden.aspx — MTR, Oct 14 '11 at 13:23

score 21 · Answer 1 · edited Mar 01 '16 at 18:37

21

public class MyMockClass
{
    public MyMockClass()
    {
        MyListBoxItems.Add(new MyDataClass() { text1 = "test text 1", text2 = "test text 2" });
        MyListBoxItems.Add(new MyDataClass() { text1 = "test text 3", text2 = "test text 4" });
    }
    public ObservableCollection<MyDataClass> MyListBoxItems { get; set; }
}

public class MyDataClass
{
    public string text1 { get; set; }
    public string text2 { get; set; }
}

In Your XAML

Add the namespace declaration

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

Add the mock data context to window/control resources

<UserControl.Resources> 
    <local:MyMockClass x:Key="DesignViewModel"/> 
</UserControl.Resources>

Then Modify Your ListBox to Reference the design time object

<ListBox x:Name="standardLayoutListBox" 
 d:DataContext="{Binding Source={StaticResource DesignViewModel}}"
ItemsSource="{Binding MyListBoxItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Label Grid.Column="0" Content="{Binding text1}" />
                <Label Grid.Column="1" Content="{Binding text2}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

edited Mar 01 '16 at 18:37

Edgar

4,348
4
40
59

answered Oct 13 '11 at 13:55

Joe Mancuso

2,099
1
16
17

4

After adding myListBoxItems = new ObservableCollection(); to the constructor of MyMockClass there is no error message, but Listbox is nonetheless empty. – MTR Oct 13 '11 at 15:37
I can't see any other problems. If you are really serious about wanting design time data, I would recommend that you look into MEF concepts. I use [Cinch](http://www.codeproject.com/KB/WPF/CinchV2_3.aspx) (Search for "ViewModel Design" to see some design time support). Sorry I can't help with a simpler solution. – Joe Mancuso Oct 13 '11 at 16:46
2

Don't forget to set mc:Ignorable in the namespace declarations: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" – Mike Christian Aug 26 '13 at 22:08
1

This solution appears to work for homogenous lists where the data template is attached directly to the 'ItemTemplate' property. However, there doesn't seem to be a solution for pure MVVM solutions where you want the items control to pick up any DataTemplate found in the resources that can be associated with a view model. – Quark Soup Feb 27 '14 at 23:03
4

The local resource definition can be excluded if the design DataContext references the type like this: d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True, Type=local:MyMockData}" – Dave Andersen Jan 22 '16 at 00:11
@DaveAndersen (or others): With either approach, I get the error: "Object reference not set to an instance of an object." The underlined error is either the tag `` or the parameter `d:DataContext ... local:MyMockClass}"`. In either case, MyMockClass shows up in the Intellisense box when I type `local:`. Thoughts? – Steven Aug 31 '17 at 18:56
@Steven, is your mock class marked as public? That's all I can think of off the top of my head. – Dave Andersen Aug 31 '17 at 19:58
@DaveAndersen It is public. I created a separate question for this issue. See: https://stackoverflow.com/questions/45990157/error-implementing-design-time-data-template – Steven Aug 31 '17 at 21:14

score 2 · Answer 2 · answered Jun 23 '21 at 08:38

Wen you are in the designer you should not have to mess with the view models therefore I think it's bet to include design time data in xaml and not in c#, have a look at this simple POCO representation

<ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>

Design time data for datatemplate in xaml

2 Answers2

Linked