In my article Silverlight MVVM File Manager, I showed how a designer could use the MVVM pattern to create a UI from scratch, without writing a line of code. However, while the run-time file manager looked like this:

The design-time file manager, in Expression Blend 4, looked like this:

Trust me, Blend can do much better. With the help of Mark Boulter, and Unni Ravindranathan at Microsoft, I figured out how to show design-time data in Blend when the data is using web services (without writing a line of code).

The Starting Project

You can get a copy of the project we will start with, at this link.

Unzip the project, and open it in Expression Blend. Open the MainPage.xaml file and click on LayoutRoot in the Objects and Timeline window.

Click on the Data tab…

You will see the Data Context section, and the commands and collections defined in the View Model. Now, normally Blend would instantiate this class and show design-time data on the design surface. This is way-cool.

The problem is, that the data in this case, is obtained by web services, and Blend is unable to call the web service in design-time so it just shows an error.

Create Sample Data

In the Data window, Click on the Create sample data icon.

Select Create Sample Data from Class…

Select the MainViewModel and click OK

You will now see the MainViewModelSampleData class.

Click and drag the SilverlightFolders collection (that is under the MainViewModelSampleData class), to the Objects and Timeline window.

… and drop it on the treeView

Click and drag the SilverlightFiles collection to the Objects and Timeline window and drop it on the [ListBox]

The sample design-time data will now show, but the format is now wrong. The reason is, that Blend created default templates for the collections we just dragged. We already have some templates, so we just need to tell Blend to use the ones we already created.

Note, had I used this method when I first created the tutorial this would not have been a problem because we would not have created a template at this point.

In Blend, in the Objects and Timeline window, right-click on the treeView and select Edit Additional Templates > Edit Generated Items (Item Template) > Apply Resource > SilverlightFolderTemplate.

Do the same for [ListBox] and select SilverlightFileTemplate

Now we have the design-time experience we desire. For this simple file manager, this may not be that big of a deal, but what if you had a really complex application your were designing?

Designing Using Design-Time Data

Another thing I forgot to do in the original tutorial, was use a icon for the files in the file window. Let’s fix that now.

In Blend, in the Objects and Timeline window, right-click on the [ListBox] control and select Edit Additional Templates > Edit Generated Items (Item Template) > Edit Current.

In the Projects window, drag the page_white.png graphic…

To the design surface. Drop it anywhere but inside the blue box that will appear.

If you look at the Objects and Timeline window (while still holding the mouse button down), you will see that the [StackPanel] is highlighted when you are not hovering over the blue box (on the design surface), but the [HyperlinkButton] is when you hover inside the blue box.

If you dropped the icon while [HyperlinkButton] was highlighted, it would bind the [HyperlinkButton] to the graphic. We don’t want that, the [HyperlinkButton] is already bound to the name of the file.

Drop the icon outside the blue box and it will now appear inside the blue box (I know, confusing isn’t it, but cut the programmers at Microsoft some slack here. Designing a tool that allows all this magic with no code is hard to design…).

In the Objects and Timeline window, you will see the [image] below the [HyperlinkButton]

Drag it so that it is above the [HyperlinkButton]

Click on the [StackPanel] in the Objects and Timeline window, and in the Properties window, set the Orientation to Horizontal.

The design-time view shows us exactly what we want.

Click the Return Scope icon, in the Objects and Timeline window, to return to normal design mode.

The Objects and Timeline window will return to the normal project scope.

Hit F5 to run the project…

We now have the complete application.

The Revolution Continues…

The sample data in Expression Blend can also be used to allow a Designer to start a project in Blend and create the UI first. A Programmer could come in later and actually make it work. While it is best to:

1. Gather requirements
2. Create SketchFlows in Expression Blend to prototype the project
3. Create the Model and the View Model
4. Create the UI (the View)

Sometimes you may want to allow the Designer the ability to work on some UI before the back-end code is ready.

You can download the complete project at this link.