Search code examples
c#xamlwindows-8microsoft-metroexpression-blend

How can I use DesignData to help develop a Metro app?

I've been merrily using the DesignData in Windows Phone apps, and I was hoping to use it to help visualise designs in a Metro style app in VS2012/Blend for VS.

I've tried the hopefully obvious:

<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="MyRootNamespace.Views.EventView"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyRootNamespace.Views"
xmlns:common="using:MyRootNamespace.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:bm="using:Bing.Maps"
d:DataContext="{d:DesignData Source=../SampleData/SpecialEventSampleData.xaml}"
mc:Ignorable="d">

With the SpecialEventSampleData.xaml looking loosely like:

<local:SpecialEvent 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyRootNamespace.ViewModels" 
EventName="Foo Fighters" 
Description="This exclusive April Fools Gig will see Dave Grohl and the rest of the Foo Fighters rock out at this exclusive made up gig" 
VenueName="Village Hall" 
/>

The class to which it refers has a public, parameterless constructor, but Visual Studio is giving an error:

Error Cannot create an instance of "SpecialEvent". C:...\MyRootNamespace.Windows\SampleData\SpecialEventSampleData.xaml

In addition, I was expecting to have to set the build action to "DesignData", or similar, but this doesn't appear to be an option in Visual Studio 2012?

What do I need to do to be able to get design time data to work in VS2012/Blend?

Solution

  • Is SpecialEvent your ViewModel? If so, can you do something like this in your XAML (directly after your common:LayoutAwarePage opening declaration)?

    <d:Page.DataContext>
    <local:SpecialEvent>
</d:Page.DataContext>

    And then remove this line from your common:LayoutAwarePage:

    d:DataContext="{d:DesignData Source=../SampleData/SpecialEventSampleData.xaml}"

    I have code similar to this that is working.