How to have DesignTime data in WinRT XAML?

Question

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

score 22 · Accepted Answer · answered Jun 10 '12 at 01:53

22

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!

answered Jun 10 '12 at 01:53

Jerry Nixon

31,313
14
117
233

Would love to see an example of using d:DesignData :) – swinefeaster Dec 15 '12 at 06:45
Actually nevermind found it, see this: http://stackoverflow.com/questions/8303803/setting-design-time-datacontext-on-a-window-is-giving-a-compiler-error. This is better because you can do it just through xaml and don't have to much with it in code, which makes more sense (to me anyways). – swinefeaster Dec 15 '12 at 06:51
Talk to me after you try the other approach in Windows8. – Jerry Nixon Dec 18 '12 at 16:42
2

The other method works great. I derived a class from my real view model and just plugged in fake data, and then used the following code in xaml: d:DataContext="{d:DesignInstance Type=my:MyDerivedSampleDataClass, IsDesignTimeCreatable=True}" – swinefeaster Dec 19 '12 at 00:21
1

Brilliant, thanks for the update! Why not post your solution as an answer to this question so others can see? – Jerry Nixon Dec 19 '12 at 03:38
Hmmm, actually I'm really doing the same thing you are just assigning it slightly differently in xaml (see my above comment). So your solution is still correct. – swinefeaster Dec 22 '12 at 01:45
How about my solution? :-) @swinefeaster – kimsk Sep 03 '13 at 03:00

kimsk · Answer 2 · 2013-09-19T04:17:58.740

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.

enter image description here

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

How to have DesignTime data in WinRT XAML?

2 Answers2

Linked

Related