When designing Windows 8.1 apps it’s essential to have design-time data available in some way, so we can actually see how the app will look like.

Iris Class described in this great article, that there are several ways, how to achieve this:

• Using XAML – Design time data source set in XAML
• Using a ‘standalone’ data source class – Design time data source set in XAML
• Conditional data source – Design time data source set in code

But what I missed in this aticle is probably the most interesting way, how to use design-time data in Windows 8 apps – using external Json files. Here’s a short guide, how to do it:

First of all, I was not sure if this is a new feature in Windows 8 apps, or it was possible already to use Json as the data source for design-time data in Silverlight or WPF apps. The fact I have not found any article about such usa in Silverlight and WPF makes me believe this is really something new, that can be used only in Windows 8 apps.

So what do we need to use Json file for design-time data? First of course the json file, added as “Content” into our Windows 8 project. Then we also need “reference” C# class, that has same property structure as the json data. This is how it looks, when added to the original sample Iris used in her article:

<Grid Grid.Row="2" Grid.Column="1" Background="{Binding Color}"
    d:DataContext="{d:DesignData Source=./SampleData/sampledata.json, Type=viewModels:JsonViewModel}">
    <StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Json Data - design time data source set in Json" Style="{StaticResource title}"/>
        <TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
    </StackPanel>
</Grid>

And this is how the reference JsonViewModel looks like:

public class JsonViewModel
{
    public string Data { get; set; }
    public string Color { get; set; }
}

It looks quite simple, right? Basically you just have to add as your d:DataContext reference to d:DesignData object, that points either to data in XAML file, or data in Json file in case of Windows 8 apps. Then in case of json file you have to provide reference to Type, that corresponds with the provided json model using the Type= property.

Note that defining properly the reference Type is probably the most complicated part of using json data here. As far as I found, Visual Studio and Blend uses some kind of internal data contract deserializer for parsing the json data and the provided class is used as a reference. What is interesting here, that you don’t have to implement setter in you Type class, only getter. Your getter can even return const value and it will just work in the Design Time. For instance this class works as well in my example:

public class JsonViewModel
{
    public string Data { get { return null; } }
    public string Color { get { return null; } }
}

This leads me to conclusion, that Visual Studio engine is only using the provided Type as a source for metadata about internal properties, that are gathered using reflection. The important part is here that every property in the Type must be creatable using reflection and not just generic type like ICollection<string>. It’s then probably a good idea to not use your real app model types for design time data, but rather create separate model specifically designed to match the signature of your json files.

If I should gather Pros and Cons about this solution, here’s my summary:

Good:

• you can use simple and easy to read json file for your design time data
• you can easily create such file using just JsonConvert.SerializeObject(model) from Json.NET

Bad

• the provided Type for the d:DesignData definition must be really properly designed, otherwise the json file just won’t load at all and you even won’t get any meaningful help, what’s wrong

So that’s my summary. It’s quite easy to use if you keep in mind, that the reference Type must be well designed for the target json file structure.

The updated DesignTimeExample is here, feel free to use it and let me know, what you think about this approach!