Browse DevX
Sign up for e-mail newsletters from DevX


Use WPF and WCF to Build Next-generation Applications : Page 4

Microsoft's new Expression tool allows designers to pass their output directly to developers in order to create rich XAML applications with an integrated toolset. Find out how to build a service using the Windows Communication Foundation and create a test client for it using "Cider," the plug-in for Visual Studio.NET that allows you to build XAML interfaces.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

using (AdwServiceProxy proxy = new AdwServiceProxy("default")) { recs = proxy.GetAllRecordDetails(); for (int nIndex = 0; nIndex < recs.Length; nIndex++) { string strText = recs[nIndex].strName; lstBox1.Items.Add(strText); } }

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.

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:

private void HandleListClick(object sender, SelectionChangedEventArgs e) { using (AdwServiceProxy proxy = new AdwServiceProxy("default")) { int nID = recs[lstBox1.SelectedIndex].nID; fullRecord theRecord = proxy.GetFullRecordDetails(nID); BitmapImage myBitmapImage = new BitmapImage(); myBitmapImage.BeginInit(); myBitmapImage.StreamSource = new System.IO.MemoryStream( theRecord.bLargePhoto); myBitmapImage.EndInit(); imgProduct.Source = myBitmapImage; lblName.Content = theRecord.strName; lblColor.Content = "Color : " + theRecord.strColor; lblPrice.Content = "Cost : " + String.Format("{0:C}", theRecord.nListPrice); lblProductNumber.Content = "Product Number : " + theRecord.strProductNumber; lblSize.Content = "Size : " + theRecord.strSize; } }

Now, when you run the application you'll see something similar to Figure 5.

Figure 5. Run your test client in Avalon.
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!

Laurence Moroney is a freelance enterprise architect who specializes in designing and implementing service-oriented applications and environments using .NET, J2EE, or (preferably) both. He has authored books on .NET and Web services security, and more than 30 professional articles. A former Wall Street architect, and security analyst, he also dabbles in journalism, reporting for professional sports. You can find his blog at http://www.philotic.com/blog.
Thanks for your registration, follow us on our social networks to keep up-to-date