RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


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

Gain graphics and data-binding power you've only dreamed of with the new capabilities in the Windows Presentation Foundation and the new Expression tool.

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date