How to have DesignTime data in WinRT XAML?

Question

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

Answer 1

Here is the d:DesignInstance sample:

I will also use Jerry's Fruit class, but I won't use MVVM here as you don't need that to make it works.

Basically, we need to create the data model class (e.g., ViewModel or Model) that we want to have design data (e.g., in this case, I create a child class, but you don't need to).

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

public class SampleFruit : Fruit
{
    public SampleFruit()
    {
        Name = "Orange (Sample)";
    }
}

Then in our XAML, we can use d:DataContext to bind the child class.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
      DataContext="{Binding}"
      d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}">
    <TextBlock Text="{Binding Name}"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="42"/>
</Grid>

Please note this line:

d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}"

Now you should see your design time data on both Visual Studio Designer and Blend.

P.S. In Blend 2013, there is a data tab that let you create sample data as well.

Answer 2

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!