Mar 022014
 
 March 2, 2014  Posted by at 9:43 pm C# & F#, WinRT, WP  Add comments

Design time data is data that you use for your application while working on the design without the application running. When the application is running this data is often replaced with the real data.

Grab the application here:
DesignTime Data in Windows Store App Gitub

Without any sort of data to fill in the controls and templates designing the user interface becomes a pain. There might be several reasons why you have to replace the runtime data with fake data during design time. The data source might only be available as it is being pulled from somewhere else, you don’t have the data yet, or data retrieval is complex and/or depends on user interaction.

DesignTime Data in Windows Store App 11

Booting up the application to tweak the graphical aspects is not only tedious but also unnecessary with the fantastic tooling we have available to us in Visual Studio and Blend.

DesignTime Data in Windows Store App 12

There are many ways you can add design time data, and if you are using the MVVM pattern for the application architecture then you can wire up the fake data easily by either completely replacing the ViewModels with data, or just the data source.

Let’s cover three ways you can do this, in reverse order of my recommendation (which might or might not be the best way).

I’ve grouped the 6 ways I’m covering in this article in three groups.

Using XAML – Design time data source set in XAML

DesignTime Data in Windows Store App 11b

XAML Data – design time data source set in XAML

What:

Sample data created in XAML, referenced in as d:DataContext

Good:

Easy to set up (in Blend)

Can be type based

Some prefer separation in XAML since UI related

Bad:

Hard to maintain

Somewhat unreliable

View

[sourcecode language=”XML”]
<Grid Grid.Row="2" Grid.Column="0" Background="{Binding Color}" d:DataContext="{d:DesignData Source=./SampleData/ViewModelSampleData.xaml}">
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="XAML Data – design time data source set in XAML" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
</Grid>
[/sourcecode]

Datasource

[sourcecode language=”XML”]
<!–start–>

<ViewModels:ViewModel xmlns:ViewModels="using:DesignTimeExample.ViewModels" Color="#FF00D0" Data="Fake Data"/>

<!–end–>
[/sourcecode]

DesignTime Data in Windows Store App 3a

DesignTime Data in Windows Store App 3b

Using a ‘standalone’ data source class – Design time data source set in XAML

DesignTime Data in Windows Store App 11c

Anonymous data source in code – design time data source set in XAML

What:

Anonymous type with data source properties set

Good:

Easy to set up

More readable that XAML sample data

Bad:

Hard to maintain

No parity guaranteed with real data construct

View

[sourcecode language=”XML”]
<Grid Grid.Row="2" Grid.Column="1"
d:DataContext="{Binding Source, Source={d:DesignInstance Type=sampleData:AnonymousTypeData, IsDesignTimeCreatable=True}}">
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Anonymous data source in code – design time data source set in XAML" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
<Grid.Background>
<SolidColorBrush Color="{Binding Color}" Opacity="0.8"/>
</Grid.Background>
</Grid>
[/sourcecode]

datasource

[sourcecode language=”csharp”]
namespace DesignTimeExample.SampleData
{
public class AnonymousTypeData
{
public object Source
{
get
{
return new
{
Color = "#FF00D0",
Data = "Fake Data"
};
}
}
}
}

[/sourcecode]

DesignTime Data in Windows Store App 4a

DesignTime Data in Windows Store App 4b

Typed data source in code – design time data source set in XAML

What:

Fake data construct that has same construct as real data, but set explicit in XAML as the design time data

Good:

More readable than XAML data

Parity with real data source if contracts are applied

Bad:

Harder to maintain than solutions with one access point/ one root object where real and fake data source is set

View

[sourcecode language=”XML”]
<Grid Grid.Column="2" Grid.Row="2"
d:DataContext="{Binding Source={d:DesignInstance Type=viewModels:FakeViewModel, IsDesignTimeCreatable=True}}">
<!–DataContext set in code behind–>
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Typed data source in code – design time data source set in XAML" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
<Grid.Background>
<SolidColorBrush Color="{Binding Color}" Opacity="0.65"/>
</Grid.Background>
</Grid>

[/sourcecode]

Datasource

[sourcecode language=”csharp”]
namespace DesignTimeExample.ViewModels
{
public class FakeViewModel : IViewModel
{
public string Data
{
get { return "Fake data"; }
}

public string Color
{
get { return "#FF00D0"; }
}
}
}

[/sourcecode]

DesignTime Data in Windows Store App 5a

DesignTime Data in Windows Store App 5b

Setting two property values (property element syntax) in XAML

What:

A variation of how you can set design time data in XAML using the property element syntax, and also setting the ‘real’ data context the same way.

Good:

Personally I find this more readable and easier to distinguish between the fake data source and the real

Parity with real data source if contracts are applied

Bad:

Harder to maintain than solutions with one access point/ one root object where real and fake data source is set

View

[sourcecode language=”XML”]
<Grid Grid.Column="3" Grid.Row="2">
<d:Grid.DataContext>
<viewModels:FakeViewModel/>
</d:Grid.DataContext>
<Grid.DataContext>
<viewModels:ViewModel/>
</Grid.DataContext>
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Setting two property values (property element syntax) in XAML" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
<Grid.Background>
<SolidColorBrush Color="{Binding Color}" Opacity="0.5"/>
</Grid.Background>
</Grid>
[/sourcecode]

DesignTime Data in Windows Store App 6a

Conditional data source – Design time data source set in code

DesignTime Data in Windows Store App 11d

Setting property value (property element syntax)

What:

In XAML set the DataContext to a source class that has a conditional statements that looks to see if the the application is in design mode or not, supplying desired data based on application state.

Good:

Readable

Switch between fake and real data closer to where data source is defined

Bad:

No ‘one’ root object/ access point that would make it easier to swap data

View

[sourcecode language=”XML”]
<Grid Grid.Column="4" Grid.Row="2">
<Grid.DataContext>
<viewModels:OtherViewModel/>
</Grid.DataContext>
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Setting property value (property element syntax)" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
<Grid.Background>
<SolidColorBrush Color="{Binding Color}" Opacity="0.3"/>
</Grid.Background>
</Grid>
[/sourcecode]

Sourcecode

[sourcecode language=”csharp”]
namespace DesignTimeExample.ViewModels
{
public class OtherViewModel:IViewModel
{
public string Data { get; private set; }
public string Color { get; private set; }

public OtherViewModel()
{
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
SetData("Fake data", "#FF00D0");
else
SetData("Real data", "#5EFF00");
}

// Abstract away with interface and use IoC to deliver right data
void SetData(string str, string color)
{
Data = str;
Color = color;
}
}
}

[/sourcecode]

DesignTime Data in Windows Store App 7a

DesignTime Data in Windows Store App 7b

Using a resource locator as real/fake data access point

What:

One class that holds references to the classes used for the data contexes (notice: plural), with a conditional statement that has a conditional statement looks to see if the application is in design mode or not, supplying desired data based on application state.

Good:

Readable

The most maintainable option (in my opinion) due to having a root object and one place to go for change

Bad:

Takes more time initially to set up

It’s not XAML, in case you really love XAML

[sourcecode language=”XML”]
<Grid Grid.Column="5" Grid.Row="2">
<!–You can add me in App.XAML- kind regards resource–>
<Grid.Resources>
<viewModels:Locator x:Key="Locator"/>
</Grid.Resources>
<Grid DataContext="{Binding ViewModel, Source={StaticResource Locator}}" Margin="0,10,0,-10">
<StackPanel Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Using a resource locator as real/fake data access point" Style="{StaticResource title}"/>
<TextBlock Text="{Binding Data}" Style="{StaticResource subTitle}"/>
</StackPanel>
<Grid.Background>
<SolidColorBrush Color="{Binding Color}" Opacity="0.1"/>
</Grid.Background>
</Grid>
</Grid>
[/sourcecode]
[sourcecode language=”csharp”]
namespace DesignTimeExample.ViewModels
{
public class Locator
{
public IViewModel ViewModel { get; set; }

public Locator()
{
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
ViewModel = new FakeViewModel();
else
ViewModel = new ViewModel();
}
}
}

[/sourcecode]

DesignTime Data in Windows Store App 8b

DesignTime Data in Windows Store App 8a

These are just some out of many ways, and I hope it has given you some ideas and if you haven’t used design time data before I hope this will get you started.

What you choose will have to depend on what you are creating and what you prefer. I highly recommend the MVVM Light framework for wiring, but make sure you do understand the underlying plumbing so you can leverage the framework and toolset the way it is intended to be used.

  2 Responses to “6 ways of setting design time data in Windows Store Apps (XAML and C#)”

  1. Good on you Iris. like always good article
    You might want to add 7th way which is new awesome way as well which is json based
    d:DataContext=”{Binding Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}”

    It is only supported in 8.1

    ahmad2x4@twitter

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 8 + 13 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)