Introducing sample data for Developers

Blend 3 brings to the table really sophisticated support for sample data, enabiling better designability of your applications. In my previous post, I demonstrated how designers could leverage this feature to prototype data connected applications inside Blend . However, for really sophisticated applications, richer support might be desirable - for example, you might want to use your own custom types for sample data in the cases where you cannot re-create the schema from scratch using the primitives that we provide. 

Here is a small example that will help you get started on a feature that we just introduced in recently available Blend 3 build – we call this feature “design data”. This feature allows developers to enable designers to be more productive inside Blend for practical LOB applications where there is a clear separation between model and view, and where you can’t use the Blend sample data feature as your UI might depend on your custom business objects (for example, think typed data templates in WPF).

Design Data Sample

 

Let us take a quick tour of this example, and see how things work behind the covers:

 

ShoppingCart.cs defines a data structure that we are trying to visualize in ShoppingCartView.xaml. The type ShoppingCart does not have a public constructor, neither does ShoppingCartItem. Similarly, ShoppingCart has a read-only property ItemsCount. These kinds of limitations are extremely common in real-world data structures (and is being demonstrated here to show how our system handles these limitations just fine, without requiring your to make changes to your run-time code)

 

The sample data for ShoppingCartView.xaml is defined in ShoppingCartSampleData.xaml, which is included with a special build item type in the project file: <DesignData Include="ShoppingCartSampleData.xaml" />. This ensures that you don't pay any run-time penalties for enabling this design-time only feature.

The contents of ShoppingCartSampleData.xaml look like following:

<local:ShoppingCart

      xmlns:local="clr-namespace:DesignDataSample;assembly=DesignDataSample" ItemCount="22">

      <local:ShoppingCart.Items>

            <local:ShoppingCartItem ItemName="Book Name 1" ItemDescription="A very nice book!" ItemImage="/DesignDataSample;component/MySampleDataImages/Tree.jpg"/>

      </local:ShoppingCart.Items>

</local:ShoppingCart>

 

There are a few things to note about the contents of this file:

a) While the format is XAML, we have relaxed the specification quite a bit. You are allowed to specify a value for the read only property (ShoppingCart.ItemCount, ShoppingCartItem.ItemName), as well as initialize objects that don’t have public constructors (ShoppingCart, ShoppingCartItem). Blend creates on the fly types which look like user types. You could choose to prevent reflection (in which case, what you can specify in XAML is severely restricted) by specifying <IsDesignTimeCreatable>true</IsDesignTimeCreatable> in the project file for the sample data XAML item.

b) You can specify any platform type like Brushes, ImageSource, Uri, etc.

c) You get full intellisense in Blend for typing this XAML.

 

In ShoppingCartView.xaml, we then hookup the sample data like so:

<Grid x:Name="LayoutRoot" d :DataContext="{d:DesignData Source=ShoppingCartSampleData.xaml}" Background="#FFB2B2B2">

 

For WPF projects, if your XAML was using typed data templates, you need to add the following attribute to those typed data templates to get picked up automatically, if you were using the reflection based sample data types and you wanted a good design experience.

<DataTemplate x:Type="{local:Foo}" d :IsDesignTimeCreatable="False" >

 

This particular sample data feature will also be supported in VS 2010. As always, please don't hesitate to ask for further clarifications, and I really value your feedback on how we could make this feature more useful for you.