Making a DataTemplate blendable

Question

How can I make a Datatemplate for a ViewModel blendable (designable in expression blend). When I go to resources and try to edit the DataTemplate directly all I see on the Drawingborad is a blank rectangle. This is because the DataTemplate is not bound to anything. Of course I can create a UserControl and create some designtime data in code there to see the template but I now would have to switch back and forth between the resource (to edit) and the usercontrol (to see the result of my edit). Isn't there a more direct way to edit and see my DataTemplate?

Answer 1

It's a bit of a stretch to use, but Blend has a feature called "Design-Time Data" that can help you out. It's tough to get started at first, but once you do a few it's pretty easy. It kind of forces you into a nice pattern for DataContext as well.

Here's a good link on the subject: http://www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

Here's a few choice excerpts:

On Design-Time Sizes

...design time properties can be safely ignored by other tools and they are ignored at the runtime (mc:Ignorable specifies that the namespace with the "d" prefix can be ignored).

 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"

Expression Blend uses two design time properties (d:DesignWidth, d:DesignHeight) to specify a size for a control to be used at design time...

On Design-Time Data Sources

I stumbled across d:Datacontext when I was playing with Blend 3 and tried adding a “live datasource” to my window. I thought it was going to behave just like the old way of setting a DataContext, but when I ran my application, there was no data! ...

So the upshot is, now we can write code like this:

...
<Grid ...
      DataContext="{StaticResource GameDataSource}"
      d:DataContext="{StaticResource DesignTime_DateDataSource}">

Note that this is for Blend 3 if you want first-party support for these features. They are pretty good - there's even a designer for the design-time data, though I've not looked into those features yet.

Applying To DataTemplates

This is something I sorta made up, but it seems to work. Here I'm using the Design-Time data feature to pull data into the visual element's d:DataContext. You'd have to do this for every top-level element that needed a DataContext set.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <!-- Resource dictionary entries should be defined here. -->
    <DataTemplate x:Key="MyTemplate">
        <TextBlock Text="{Binding Text}" d:DataContext="{StaticResource SampleDataSource}" />
    </DataTemplate>
</ResourceDictionary>

The binding syntax is a little bit more explicit if you are using a DataTemplate with a DataType set, but it still works:

<DataTemplate DataType="{x:Type vm:MyViewModel}" >
   <TextBlock Text="{Binding Text}" 
              d:DataContext="{Binding Source={StaticResource SampleDataSource}}" />
</DataTemplate>

This strategy will allow you to see how the DataTemplate will work while editing it directly, however you won't be able to see the result on any view that utilizes that DataTemplate unless you actually run the app. This is a limitation of Blend at the moment due to the fact that they don't appear to be using Mocks, but rather complete replacement objects. If blend ever adds the ability to create a new fake data source by clicking on "New DataSource -> Based on Referenced Object -> MyCustomerObject", then you will be in business.

It's possible you could overcome this limitation with some attached property trickery of your own, but it would be difficult at best.

Alternative

An alternative that will work in every situation, but is a bit more cumbersome to setup is setting up StaticResources that swap out fake data for real data during runtime, but in the designer show static sample data.

Here's a really great article by Karl Shifflett that includes some of these techniques and a few videos on it: http://karlshifflett.wordpress.com/2008/10/11/viewing-design-time-data-in-visual-studio-2008-cider-designer-in-wpf-and-silverlight-projects/

Hope this helps, Anderson