A simple design time data example with Windows Store Applications for beginners

I’ve gotten many question about design time data and how you can work with it. The default templates are for many a tiny bit complicated, and if you look at most of the examples out there for design time data ther are often just modified versions of the code in the template.

The app using the ‘real’ data at runtime

The app using design time data during design time

You can download the full working example here, A simple design time data example with Windows Store Applications for beginners

So here is a very simple example created from scratch that will hopefully give you a better idea how design time data works, or at least help you have something visual to work with when you bare working with the design so you don’t have to run the application each time you’ve made a change in the design to see how it actually looks.

Spend those extra minutes on this, at least the views that need a lot of design- you’ll be glad you did later. Windows Store Apps should follow the guidelines for the grid-based layout, and it is much easier to do than with deisgn time data. I made a cheat sheet here.

Working with the margins and the grid using design time data

To add design time data you need to set the datacontext for the ‘fake data’, now this can be done many different ways, so this is just one way to do it. Here I’ve set the ‘real’ datacontext to the belonging codebehind file, and the designtime data to a class called DesignTimeData. mc:Ignorable=“d” is a way to tell the app to ignore d-prefix attributes during runtime.
Don’t forget to import the namespace where the dasign time data is, as you see by local=“using:…. in this example.

Read more about the properties here

A simple design time data example with Windows Store Applications for beginners

[sourcecode language=“XML”]
xmlns:local=“using:WinRTDesignTimeDataSimpleExample”
DataContext="{Binding RelativeSource={RelativeSource Self}}”
d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
mc:Ignorable=“d”
[/sourcecode]

EDIT: This example is for windows store apps, but you can just as well use this for a Windows Phone App, just remember that the namespaces aren’t the same

Windows Store Apps: xmlns:local="clr-namespace:Your_App"

Windows Phone: xmlns:local="using:Your_App"

So with d:Datacontext you set the fake data. If you only want to bind to a particular property on that design time class, you can set Binding MySubViewProprty and of course change the name to the actual name. Source tells us where to get the data, and Type tells us what kind of data this is- the type and the last boolean specifies that the design instance is created from our own type

Then you set up your bindings for the elements as usual.

To set up the design time data you just need to make sure the properties the elements expect to bind to exist, and that they are populated in the constructor.

‘Fake data’

[sourcecode language=“csharp”]
using System.Collections.Generic;

namespace WinRTDesignTimeDataSimpleExample
{
public class DesignTimeData
{
public List Cats { get; set; }

    public DesignTimeData()  
    {  
        Cats = LoadCats();  
    }  

    List<FakeCat> LoadCats()  
    {  
        return new List<FakeCat>  
                   {  
                       new FakeCat {Name = "Name goes here", Image = "../Assets/fakeCat.png"},  
                       new FakeCat {Name = "Name goes here", Image = "../Assets/fakeCat.png"},  
                       new FakeCat {Name = "Name goes here", Image = "../Assets/fakeCat.png"},  
                       new FakeCat {Name = "Name goes here", Image = "../Assets/fakeCat.png"},  
                   };  
    }  
}  
public class FakeCat  
{  
    public string Name { get; set; }  
    public string Image { get; set; }  
}  

}

[/sourcecode]

The real data in code behind- shown when the app is running

[sourcecode language=“csharp”]
using System.Collections.Generic;

namespace WinRTDesignTimeDataSimpleExample
{
public sealed partial class MainPage
{
public List Cats { get; set; }

    public MainPage()  
    {  
        InitializeComponent();  
        Cats = LoadCats();  
    }  

    List<RealCat> LoadCats()  
    {  
        return new List<RealCat>  
                   {  
                       new RealCat {Name = "Cutie-pie", Image = "../Assets/cat1.jpg"},  
                       new RealCat {Name = "Awesome cat", Image = "../Assets/cat2.jpg"},  
                       new RealCat {Name = "Heart-melter", Image = "../Assets/cat3.jpg"},  
                       new RealCat {Name = "Luve-u-too-cat", Image = "../Assets/cat4.jpg"},  
                   };  
    }  
}  

public class RealCat  
{  
    public string Name { get; set; }  
    public string Image { get; set; }  
}  

}

[/sourcecode]

The View- all of it this time

[sourcecode language=“XML”]



<GridView.ItemTemplate>






</GridView.ItemTemplate>

[/sourcecode]

Comments

Excellent post...why can't Microsoft's documentation and examples be this clear? For a relative noob like myself this is exactly the information I need. I can't wait to try this out on a few of my apps...I think this will save me a lot of time when I am tweaking my layouts. 

As always, you've put together another great tutorial! Your sample is so much clearer than any of the MS provided ones. 

I did run into one hitch, however. I'm developing on Windows Phone 8, and for some reason I kept getting an error stating that DesignTimeData did not appear in my namespace (this is from my MainPage.xaml).

Apparently I needed to use this:

 xmlns:local="clr-namespace:PhoneApp2"

The key point here is the "CLR-"

I'm not sure of why it required that, but once I had that in place, it all worked fine. Figured I would save someone else the grief! 

Thank you =)

yeah- namespaces differ between those two platforms- it's one of the (many) breaking changes between the platforms.
Windows phone: xmlns:local="clr-namespace:Your_App" Windows Store Apps: xmlns:local="using:Your_App"

You can also create design time data by the click of a button in Blend for Windows Phone 8 apps (not Windows Store), I have a separate blog post coming about that. 

Thank you =) Makes me very happy to hear! I try to keep examples as simple as possible- and I'll keep making them, it's fun! 

Sorry for the double-post, I just replied on an older post of yours about this same issue.

My issue with binding design time data to the CollectionViewSource. I saw a great example of this in action on a channel 9 video (http://channel9.msdn.com/Events/Build/2012/3-006) but no source code and I could not determine what I have been doing wrong. 

On question is do I need to bind this to an XML data source? that would make me a sad panda...

I can bind just find to an ObservableCollection at design time. 
I can see data just fine at run time using an CollectionViewSource
I can't get design time data to show using a CollectionViewSource :( 

"You can also create design time data by the click of a button in Blend for Windows Phone 8 apps (not Windows Store), I have a separate blog post coming about that."

I had no idea! Thank you! 

I really like this approach but absolutely could not get it to work with my CollectionViewSource. I found one blog post that said CollectionViewSource will still require an d:Source attribute even with the page-level DataContext design-time override you provided. And here I was hoping I found a clean approach and could avoid d:Source attributes in the remaining Xaml on the page. Ah well it was worth a shot. 

your awesome i like your code i have few doubts in c# windows 8 apps can you help me out my mail id is prasanas14@gmail.com just send me a dummy mail Thanks for your codes by the way 

Thanks a lot guys. 

Excellent post!! I really like it!

One question… what about if I want to bind 2 different DataContext? 

Thanks so much for this tips. 

Last modified on 2013-02-03