One of my favorite, if not my favorite, feature of Blend 3 is Sample data. At the beginning of a project I often create a simple XML file to represent the data I’m expecting. This enables me to focus on UI tasks while the backend services are being created. Designers generally don’t go as far as creating sample data themselves, they generally hard code all the data in their comps. When the design is handed off to developers the UI has to be recreated from scratch. Needless to say, this process is manual, flawed, and unharmonious.
[put in a diagram]
Sample data in Blend 3 enables designers and developers to quickly add data without much effort (no more creating XML by hand!!!!). This post gives an visual overview of what sample data is. In a later post I’ll show how to apply Sample data to a ListBox.
Creating Sample data
The below diagram illustrates the following steps:
- Open a project in Blend 3 and locate the Data panel (this is located on the right side of the screen in the same area as the Properties and Resources panel).
- Click the Add Sample Data button in the top right of the Data Panel.
- Select Define New Sample Data. The other option, Import Sample Data from XML, enables you to bring in data you’ve created by hand.
- After selecting Define New Sample Data the a dialog box opens asking for a name, the scope of the data, and if you want the data to be enabled during runtime. Once the settings are the way you like them, click OK
- Finally, the Sample data is created.
Add a Property
Properties are very powerful and rich. Blend enables you to define strings, numbers, booleans, and images. At first, the interface looks unassuming and you probably won’t trust it to create the type of data you want. Give it a spin to see how powerful. The below screen shots show the different types and options available for each.
String
Numbers
These are integers. The Length property sets many digits you want.
Booleans
When bound, boolean data types render as check boxes.
Images
Once again, an unassuming options menu, however this is probably my favorite property. Specify a directory and Blend grabs all the images to use as sample images.
Edit values
After creating your properties, you may want to change values of the sample data. To do this, click on the Edit sample values button in the Data panels tab. This brings up the Edit Sample Values dialog box. Here you can directly work with the data.
Delete a Property
To delete a property is fairly straight forward, with one catch, you aren’t able to use the delete key on the keyboard. Instead highlight the property you want to delete, right click, and selected Remove.
Using Sample data
Now that you’ve created the sample data, how do you use it? The easiest way is to create a drag and drop the data on a Items control. The below figure shows the sample data being dragged onto a ListBox.
This is the resulting ListBox:
