Unni's Blog : Databinding

Introducing sample data for Developers

unnir — Sun, 12 Jul 2009 22:37:00 GMT

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:

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.

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.

DataGrid support in Blend 3

unnir — Thu, 19 Mar 2009 22:43:00 GMT

Blend 3 adds really cool support for the DataGrid control (for both Silverlight 3 and WPF Toolkit). Here is a quick demo to help you get started. Enjoy!

Create a new Silverlight 3 application
Search and instantiate the DataGrid control from the asset library. (As a side, this also demonstrates the newly added support for having custom controls in the Blend asset library - instantiating a custom control adds the necessary assembly references to the project, in this case System.Windows.Controls.Data.dll for Silverlight)

Create a data source that has a collection, with one or more properties. (You can easily do this using the new sample data features in Blend).

Drag and drop the collection onto the DataGrid - its that simple! Blend will automatically generate the right kind of columns for the various properties in the collection. (TIP: You can select indiviual properties using Shift+Select if you did not want a column for each property in the collection. You can even add the columns individually by dragging and dropping each property onto the DataGrid. Your can right click on the DataGrid to add new columns if you wanted to go that route.)

Select a DataGrid column (the one that corresponds to the Image column), right click on the column, and edit the CellTemplate. You can now edit this template just like you would any other template. (TIP: The properties of the DataGrid columns are also available for manipulation via the property grid).

Introducing sample data support in Blend 3

unnir — Thu, 19 Mar 2009 04:04:00 GMT

To help you walk thru some of support we have added for sample data inside Blend 3, I wrote a hands-on-lab that takes you thru the basic experience of building a simple master/detail visualization. While there are a lot more scenarios that are possible with the support for sample data in Blend 3 (some of which are not available in the public preview build, and I will in write in detail about over the next few days), you can get a first-hand experience here for the following:

A schema designer that allows you to quickly mockup a data source and supply values for the data
Improved drag/drop experience to create bindings
Master/Detail support in Blend 3
Sample data that can be enabled/disabled when the application is running
Optionally, if you are developer and are interested in knowing more about how things work behind the covers so you could adapt this for your scenarios, this can be a good starting point.

Download the hands-on-lab document here (because of the ISP that I use for hosting these files, you will have to rename this .zip file to .docx), and the starting project (to save you some time with the graphics, styling, and layout) here.