Building the Client
In a real-world scenario, a designer will have used the Microsoft Expression Interactive designer to put together a prototype of the front end, and will have handed you the C# project, or the XAML (or both) for you to plug it into the back end. But in this article, and for brevity's sake, I'm just going to use a simple XAML front-end built using the Cider add-on to Visual Studio to emulate the designer's portion of the process.
To create a WPF client in Visual Studio.NET, select the WinFX application project type (see Figure 3). You can either use the version in the download for this article, or if you want to try it yourself, add a new project to your solution, and select 'WinFX Windows Application' as the project type.
You'll use the "Cider" XAML designer for Visual Studio.NET to build the WinFX Windows Application (see Figure 4).
Figure 3. Create a WinFX Windows application.
Figure 4. Using the "Cider" XAML Designer.
For this example, I designed a XAML UI containing a list box, several labels, and an image control. The underlying XAML for this is in Listing 1
One little bug in Cider is that after you initially place and name a control in the application, it isn't immediately available to Intellisense in the code window. But if you save your application and rebuild it, presto! It turns up!
Another little gotcha (remember this is betaware) is that there's no straightforward way to map event handlers to controls. This example calls for an action to happen when you select an item on the ListBox, but you can't simply double-click on the control as you normally can to insert an event-handler, or select an event from the Properties window; instead, you have to hand-code the event-handler in the XAML. It looks like this:
<ListBox SelectionChanged="HandleListClick" ... >
To build the content of the List box, you use the proxy to call the service to get all record details. Here's the code, which is called upon Window Initialization. In the top element in the XAML in Listing 1, you'll see the Loaded="InitEverything" attribute. This code is present in that function:
The preceding code uses the AdwServiceProxy proxy instance to get the details and then parses the returned array into ListItems that get added to the ListBox.
using (AdwServiceProxy proxy =
recs = proxy.GetAllRecordDetails();
for (int nIndex = 0; nIndex < recs.Length; nIndex++)
string strText = recs[nIndex].strName;
When you select an item from the ListBox, you can then pull its ID, and use that to get additional record details (including the picture) using a Web service call to populate the image box and labels:
Now, when you run the application you'll see something similar to Figure 5.
private void HandleListClick(object sender,
using (AdwServiceProxy proxy =
int nID = recs[lstBox1.SelectedIndex].nID;
fullRecord theRecord =
BitmapImage myBitmapImage = new BitmapImage();
myBitmapImage.StreamSource = new
imgProduct.Source = myBitmapImage;
lblName.Content = theRecord.strName;
lblColor.Content = "Color : " +
lblPrice.Content = "Cost : " +
lblProductNumber.Content = "Product Number : " +
lblSize.Content = "Size : " + theRecord.strSize;
In this article you stepped through the full end-to-end process, from data through presentation, for building a multiple tier article using the next-generation Windows development technologies. You built a WCF service that wraps the database, exposing the required operation contracts. You then built a proxy to this underlying service using the Windows SDK tools, and used this proxy in a simple Avalon client, created with Cider.
If you like, you could enhance this client using Microsoft Expression Interactive designer, adding 3D, Gel, Mirroring, animation and other effects. For more information on these, check out the previous articles in this series.
It's a fun and exciting time to be a Windows developer, and with this unprecedented level of early access to the SDKs and development methodology, now is a terrific time to sharpen your toolbox using the betas!