Design and Prototypes: SampleData with Expression Blend 3.0.

By David Espino.

When we start to build a web application with a right interface its necessary to verify and make sure that we understand every requirement given by the client. For a specific situation of the user interface, the best way to transfer our thinking and understanding with the client is via creating screen prototypes.

In some occasions they contain a lot of controls like lists, combos or grids that are based on “dummy” information. They are made not just for making the screen to project the reality of what is going to be the application but also to let the prototype simulate item common elements of selection and editing. Just like the controls that represent information on the “master-detail” scheme.

What Microsoft Expression Blend 3.0 let us to do is to avoid writing the code for filling up that “dummy” information with a tool named “Sample Data”. Sample Data let us create a list of the elements in a quick way via an assistant. Also it let us to make a “Bind” to the controls where we want to show the information.

Here I am going to explain the way to use “Sample Data” with a Silverlight application:

1. The first thing that we need to do for this example is to start the Silverlight Solution. Particularly, Sample Data works with every WPF or Silverlight application designed by Expression Blend 3.0. Here is going to be used a Silverlight 3.0 +Sketchflow application. Once the application is selected we start with our design.

2. Then we need to add some control series that are going to be helpful in representing a “master-detai” information case. In this situation we are going to use a listbox to select de master registry and another textbox for writing the element description. Just like in the following image.

The XAML generated by these controls is the following:

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"

x:Class="SampleSketchScreens.Screen_1"

Width="640" Height="480">

3. The next step is to define new sample data. For this we would select in the Data Panel the option for adding a new data source “Sample Data”:

4. Now, a configuration window is going to appear for changing the basic properties of our database. We should input the name of the data source and select to add the project or document depending on its availability. The last “check” should be checked so it enables the sample data when the application is running.

5. Once the Datasources is created, the page is going to show to us the structure of the collection formed by default properties.

Additionally, inside our project we would see created a new folder with the name of “Sample Data”. The files inside that folder are:

· A XAML file with an items list that are added automatically to the collection.

· A CS file that lets you access to the public properties of each Datasource element.

· A XSD file that represents the scheme of Datasource definition.

6. The next step is to add more properties into our Datasource. To do this we need to use the “+” button localized on the right side. There are quite different types of simple properties. For the course example we added the following properties.

Every property, depending on the kind of data used, presents different options. When an image property is defined the Datasource of Sample Data generates a predetermined images list or presents an option for indicating the physical source from where the images are going to be obtained. For text properties the program lets you format the number of letters per word and the maximum number of words per field.

7. The next thing we need to do is a “Bind” between each of the screen properties and controls. We are going to do this by Drag and Drop. Blend supports two different ways to do Drag and Drop: List Mode and Details Mode. The buttons for changing this way of doing the Blind are located on the upper part of the Datasource.

8. In this example we used the List Mode to drag the “Name” property and the “Image” property to the List Box and then we used the Details Mod to drag the Description property to the TextBox.

9. For the picture we need to modify the Stack Panel orientation of the auto generated Item Template for the listbox by dragging the properties.

10. Once we do this we can compile and visualize our application. Automatically, by changing of element from the list, the item description is going to be shown on the description field.