Creating 2D Data-bound Applications with XAML and Expression : Page 3

Creating the Business Logic—Binding to Data
Now you have the template that your application is going to be built on. It doesn't really do much yet, but all that will change in a hurry when you start placing controls and binding them to a data source.

To get started, you'll need a data source. For the sake of simplicity you'll be using a flat XML file on your file system as the data store. In the next article in this series, you'll use Visual Studio.NET to build a complementary data service as well as to create the 3D "Gel" interface that you saw earlier.

But let's walk before we run. The XML file for this tutorial is included in the downloadable code. It implements the simple catalog that you'll be using here.

The application that you'll implement is based on the reference application called "Commerce Starter Kit' for ASP.NET 1.1." You can browse and experiment with the original version of this application on the ASP.NET Web site. It is a fictitious store selling silly gadgets that could potentially be used by spies.

Each gadget has a product code, name, description, rating, picture and price. The XML represents the list of gadgets like this:

   <?xml version="1.0" encoding="UTF-8"?>
   

 
Figure 8. The Data Panel. Here's how the Data panel in Expression looks before adding any data sources.

   <Catalog>
    <Products>
     <Product>
       <PCode>TCKLR1</PCode>
       <Name>Fake Moustache Translator</Name>
       <Image>c:\IBuySpy\XYZ.GIF</Image>
       <Description>Fake Moustache Translator attaches 
         between nose and mouth to double as a language 
         translator and identity concealer. Sophisticated 
         electronics translate your voice into the 
         desired language. Wriggle your nose to toggle 
         between Spanish, English, French, and Arabic. 
         Excellent on diplomatic missions. </Description>
       <Rating>***</Rating>
       <Price>$599.00</Price>
     </Product>
     ...
    </Products>
   </Catalog>

Figure 9. Create Data Binding Dialog: The figure shows the Create Data Binding dialog that you access by clicking the DataContext property in the Properties Palette.

To bind your application to this data source, the first thing you'll need to do is (surprise, surprise) create a data source connection.

If you cannot already view the Data panel, select View—> Data. You'll then see the Data panel shown in Figure 8.

As this is an XML data source, select the "Add XML Data Source…" link. In the ensuing dialog, browse to the XML file (from the downloadable source) containing the catalog information, and give it a friendly name such as "SpySource."

Next you will tie this to your application by selecting the base grid (called ProductGrid) and then viewing the Properties Palette. On this palette you can see the DataContext property. If you select it, a menu pops up. From this menu you can select "DataBind…" to call up the Create Data Binding dialog shown in Figure 9.

For this application, you want to bind to the Product level of the XML. Select the Data Field button at the top of the dialog, and then expand the nodes of the data source until you reach the level shown in Figure 9; then click "Finish." The data context of the grid is now the Product level of the data source.

Previous Page

Next Page