Designdata via xaml in WPF VS20019 - wpf

Question

I have been struggling with trying to make sample data works out of a XAML. I have tried using this guide https://blogs.msdn.microsoft.com/wpfsldesigner/2010/06/30/sample-data-in-the-wpf-and-silverlight-designer/ and this guide https://learn.microsoft.com/en-us/windows/uwp/data-binding/displaying-data-in-the-designer to get information on the subject, but besides those pages, I haven't found any other sources with good enough information. And to try an understand this mode I made a simple WPF project to test it.
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1" mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" d:DataContext="{d:DesignData Source=DesignData.xaml}">
<Window.DataContext>
<local:Viewmodel/>
</Window.DataContext>
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="119,104,0,0" TextWrapping="Wrap" Text="{Binding TextBlockValue}" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="255,101,0,0" TextWrapping="Wrap" Text="{Binding TextboxValue}" VerticalAlignment="Top" Width="120"/>
<Border Margin="542,71,80,223" BorderThickness="2">
<Border.BorderBrush>Black</Border.BorderBrush>
<ItemsControl ItemsSource="{Binding Persons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text="{Binding Lastname}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</Window>
This is my simple WPF window that has a textbox, textblock and a ItemsControl. It has a DataContext set with a Viewmodel and a design data DataContext. Viewmodel is as follows:
public class Viewmodel : INotifyPropertyChanged
{
public Viewmodel()
{
Persons = new ObservableCollection<Person>();
Persons.Add(new Person{FirstName = "first one", Lastname = "last one"});
Persons.Add(new Person{FirstName = "John", Lastname = "Doe"});
Persons.Add(new Person{FirstName = "Jane", Lastname = "Doe"});
TextBlockValue = "This is a textBlock";
textboxValue = "This is a textBox";
}
private string textBlockValue;
public string TextBlockValue
{
//<Omitted for readability>
}
private string textboxValue;
public string TextboxValue
{
//<Omitted for readability>
}
public ObservableCollection<Person> Persons { get; set; }
//<Omitted INotifyPropertyChanged implementation for readability>
}
public class Person : INotifyPropertyChanged
{
private string firstName;
public string FirstName
{
//<Omitted for readability>
}
private string lastname;
public string Lastname
{
//<Omitted for readability>
}
public event PropertyChangedEventHandler PropertyChanged;
//<Omitted INotifyPropertyChanged implementation for readability>
}
And my design data:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1">
<local:Viewmodel TextboxValue="Box Test" TextBlockValue="Block test" x:Key="Viewmodel">
<local:Viewmodel.Persons>
<local:Person Lastname="test" FirstName="test"/>
<local:Person Lastname="test" FirstName="test"/>
<local:Person Lastname="test" FirstName="test"/>
</local:Viewmodel.Persons>
</local:Viewmodel>
</ResourceDictionary>
When I add my ViewModel datacontext to the xaml I can see that the values show up in the designer. But when I assign my d:datacontext, the test data does not appear as expected. I think it is because my design data is wrong, but I cannot figure out why it is wrong.

Answer 1

The contents of your DesignData.xaml file should look like this, i.e. it shouldn't contain a ResourceDictionary:
<local:Viewmodel xmlns:local="clr-namespace:WpfApp1" TextboxValue="Box Test" TextBlockValue="Block test">
<local:Viewmodel.Persons>
<local:Person Lastname="test" FirstName="test"/>
<local:Person Lastname="test" FirstName="test"/>
<local:Person Lastname="test" FirstName="test"/>
</local:Viewmodel.Persons>
</local:Viewmodel>
You may also want to set the Build Action of the file to DesignData.