Question

How can I get DesignTime data in WinRT XAML so the designer shows sample data?

Answer 1

Simple enough.

Create a Model like this:

public class Fruit 
{
    public string Name { get; set; }
}

Create a base ViewModel like this:

public class BaseViewModel 
{
    public ObservableCollection<Fruit> Fruits { get; set; }
}

Create a real ViewModel like this:

public class RealViewModel : BaseViewModel
{
    public RealViewModel()
    {
        if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            LoadData();
    }

    public void LoadData()
    {
        // TODO: load from service
    }
}

Create a fake-data ViewModel like this:

public class FakeViewModel : BaseViewModel
{
    public FakeViewModel()
    {
        this.Fruits = new ObservableCollection<Fruit>
        {
            new Fruit{ Name = "Blueberry"},
            new Fruit{ Name = "Apple"},
            new Fruit{ Name = "Banana"},
            new Fruit{ Name = "Orange"},
            new Fruit{ Name = "Strawberry"},
            new Fruit{ Name = "Mango"},
            new Fruit{ Name = "Kiwi"},
            new Fruit{ Name = "Rasberry"},
            new Fruit{ Name = "Blueberry"},
        };
    }
}

Do this in your XAML:

<Page.DataContext>
    <local:RealViewModel />
</Page.DataContext>

<d:Page.DataContext>
    <local:FakeViewModel />
</d:Page.DataContext>

Have fun!

PS: you can also attempt to use d:DesignData.
That approach also works. I feel it is not as straight forward.
In the end, it’s up to you how to do it.
Either way, don’t miss out on DeisgnTime data!