Question

I have a tab control with a data template that renders data based on the template and the data on the source it is bound to.

However, this instantly makes UI development harder as I don’t see anything in Visual Studio 11, because all data comes when the application is running. Is there some way to add test data that only appears while working with the UI?

Answer 1

This tutorial from MSDN was perfect: http://msdn.microsoft.com/en-us/library/ee823176.aspx

Basically:

Create a file DesignData/FooData/Foo.xaml with content such as:

<local:Foo xmlns:local="clr-namespace:YourProject" 
    SomeProperty="Sample" AnotherProperty="Bar" />

Note that Foo must be a class that exists under the namespace YourProject with the properties you just used.

Then select the file from the Solution Explorer and set the Build Action to Design Data.

Add a namespace to your MainWindow.xaml code:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

along with the other namespaces you have.

Then add this to your top-level Grid for instance:

d:DataContext="{d:DesignData Source=./DesignData/FooData/Foo.xaml}"

Now elements below that Grid element (under the influence of DataContext) can have the property:

<TabControl ItemsSource="{Binding Mode=OneWay}">...

In my case I used a tab control and my data context was a collection DesignData/FooData/FooCollection.xaml:

<local:FooCollection xmlns:local="clr-namespace:YourProject">

    <local:Foo Prop1="Sample" Prop2="test" />
    ...

</local:FooCollection>