A Walkthrough
Before touring the program, download the trial version (www.microsoft.com/products/expression). Windows XP users first need to install the .NET 3.0 Framework runtime, which contains the Windows Presentation Foundation classes (Vista users already have .NET 3.0 as part of the base operating system)—a link for that download is available on the same page as the Blend trial.
Once installed and executed, the default grey-text-on-black-background can be changed to a more programmer-friendly theme via the Tools->Options menu. I tried to acclimate to the dark designer theme but my years of working with Visual Studio prompted a switch to the Expression Light theme after a few minutes.
The numerous toolbox Windows in modern day IDEs demand copious amounts of screen real estate and Blend is no different. I'm fortunate to have a dual-screen 3200×1400 resolution layout that makes app development so much easier, giving me a large design surface and code window to work with while keeping window clutter to a minimum.
One of the fastest ways to experience and understand XAML-based WFP applications is to select any of the demos that accompanies the Blend beta. However, this walkthrough begins with the construction of a new application that only takes minutes to complete. So close the initial project selection dialog, select New Project... from the File menu, type in a project name (such as "DDJRSSArticles") while leaving the default project type (Standard Application) and Language (C#), and click the OK button to be presented with an empty window into which you populate databound label, listbox, and textbox system controls.
With the main empty window selected, click on the "+ XML Source" button in the Data pane. This pops up an Add XML Data Source dialog box. Leave the default Connection Name (XMLDataSource) and type "http://www.ddj.com/rss/all.xml" in the URL for XML data textbox and click the OK button. This sets the XmlDataProvider source for the window, which can feed the other controls hosted within it. You can also change the title of the main window to "DDJ RSS Articles" via the Title field in the Properties->Common Properties pane.
Next, click on Asset Library (the dual down arrow—the bottom icon in the vertical toolbar permanently docked to the upper left side of Blend's main program window) to open the Asset Library dialog (Figure 1). Select the ListBox control and using the mouse, draw the outline of the control on top of the blank "DDJ RSS Articles" window. With that newly drawn ListBox control still highlighted, click on the ItemSource (Collection) label in the "Properties->Common Properties" window and select "Data Binding" from the drop-down list. A "Create Data Binding" dialog box will be displayed. Note that the dialog is already populated with the RSS-parsed tree data that can be quickly traversed for the specific element you wish to display in the data-bound ListBox. Select the rss->channel->item->title :(String) from the Fields tree and click the Finish button. If you selected the correct item and you have an active Internet connection, you should immediately see the results displayed in the DDJ RSS Articles window. Incidentally, there is an even faster way to create this active data-bound ListBox control by simply dragging the "rss->channel->item->title" element from the "Project->Data" window pane on to any area of the empty DDJ RSS Articles window. When you release the mouse button, a context-sensitive pop-up menu appears asking what type of control to create to represent this data field. Select ListBox from the menu and resize accordingly.
Finally, select Test Project from the Project menu to build and execute your first Blend-assisted XAML application. If you clicked the right items in the correct sequence, your version of the DDJ RSS Articles application should look similar to the one in Figure 2. Congratulations!
So there you have it. A working, standalone RSS feed display built with only a few clicks of a mouse and no handwritten code. Pretty cool! Of course, Blend wrote the code based on your placement of GUI elements and data-provider attachment but all that occurred literally behind the Design tab. To see the XAML code that was generated, click on the XAML tab just below the Design tab in the upper right corner of the Blend program window (Figure 3).
