Silverlight Sample Architecture Using WCF Service

For better or worse, I'm the first in my company to start using Silverlight. I've been working with Silverlight for a little over a month now and I love it. It has it's drawbacks and shortcomings, but overall, it's a great tool for building web–based applications that run through a browser without an install.


I've learned a lot since I started using the tool, and I plant write a series of articles to share some of the lessons. Before I get into that, I want to share the architecture that I am using, for 3 reasons:

• 
  1. I hope this helps somebody else get going
  


• 
  2. If there are improvements, suggestions, etc. that can be made to this architecture, I'd like to hear them
  


• 
  3. My future articles will reference back to this one – some of the things I've overcome only make sense if you know how things are setup
  

My Silverlight application has a very simple architecture. I use a single WCF service, hosted in the "ASP.NET Web Application Project" that Visual Studio 2008 created for me when I setup my new application. Figure 1 shows the option I chose to setup my application when I first created my, "Silver Sample" Silverlight application.


Figure 1 – Silverlight Application Setup





After creating the SilverSample project using Visual Studio 2008, I went to Page.xaml and added a TextBlock within the default Grid that was provided. See Figure 2 for what my initial application architecture looks like and the "Hello World" XAML I added.


Figure 2 – Silver Sample Initial Architecture with "Hello World" Textblock





That was enough to get me started, so I compiled and ran the application. Visual Studio was kind enough to ask me if I wanted to debug this application if I ever run into problems. This is a nice feature, so I chose to "Modify the Web.config file to enable debugging" and clicked "Ok" – see Figure 3.


Figure 3 – Debugging Question from Visual Studio




My first Silverlight application came up successfully in IE – see Figure 4.


Figure 4 – Hello World




Hello World was working. Next I wanted to test getting data to the client application, (SilverSample) from the web server application, (SilverSample.Web).




I stopped the SilverSample application and right–clicked on the SilverSample.Web project in the Solution Explorer, choosing "Add New Item". In the "Add New Item" window, I chose, "WCF Service", named my service "SilverService.svc" and clicked the "Add" button – see Figure 5.



Figure 5 – Setting up my WCF Service within the ASP.NET Web Application Project





Visual Studio setup 3 files for me; ISilverService.cs, SilverService.svc.cs and SilverService.svc. See Figure 6.



Notice that SilverlightService inherits from its interface, ISilverService.


Figure 6 – Silver Sample with WCF Service added to the Web Application





I like to work with lists, so to test my new SilverSample application and its interaction with the WCF service, I created a list of strings and setup a method in SilverService.cs to return those strings. I also deleted the default, "DoWork()" method because I didn't need it. See Figure 7.
 



Figure 7 – CityList WCF Service




After creating my list I had to modify the ISilverService interface to get rid of the "DoWork()" method and include an interface for "CityList" – see Figure 8.
Figure 8 – City List Class Interface and Contract for WCF Service




The default binding entries which Visual Studio automatically configures for you when you add the WCF service to the web application are wsHttpBinding. Currently, Silverlight only supports basicHttpBinding. Figure 9 shows the generated values that will need to be changed.


Figure 9 – Generated Web.Config




Because Silverlight only supports basicHttpBinding, you will need to change the binding setting that was automatically generated for you when you added the service from wsHttpBinding to basicHttpBinding. See Figure 10.


Figure 10 – Change to Web.Config




I successfully built my application, with my new service by hitting F6 and noting that it said "Build Successful" in the lower–left–hand corner of the Visual Studio window.


Note: It's important to build the web project before attempting to use the web service from the Silverlight client application. More on this in a future post.




With my first service built, I went back to the client project, SilverSample, and add a Service Reference by right–clicking on the SilverSample project and choosing "Add Service Reference".


I clicked the "Discover" button and SilverSample found SilverService.svc for me. Next I verified the service by clicking the (+) next to "SilverService.cs" in the "Services" box. This showed the Interface definition. I also named my reference to the service, "SilverServiceProxy". See Figure 11.



Figure 11 – Add Service Reference




My service returns a Generic List, so before I clicked OK, I clicked "Advanced" which brought me to the "Service Reference Settings" screen where I changed the "Collection Type" in the "Data Type" section from "System.Collections.ObjectModel.ObservableCollection" to "System.Collections.Generic.List". See Figure 13.


I then clicked "OK" to exit out of the "Service Reference Settings" and "OK" to exit out of "Add Service Reference".


Figure 12 – Service Reference Settings




With my service configured on the client and the server, I wrote a little XAML in Page.xaml to help organize my output. See Figure 13.


Figure 13 – Page.xaml




I then went back to Page.xaml.cs and wrote code to consume the service asynchronously.



Next, I added a using statement at the top which referenced the service reference I just added; SilverSample.SilverServiceProxy. This makes the WCF service call a little less verbose.


Next I wrote a method called "getCityList" which makes the call into the WCF service asynchronously and a method called "getCityListCompleted" which is called when the list of cities comes back from the service. This method adds some rows and text blocks to the grid on the page to display the results.


See Figure 14 for these methods.


Figure 14 – Page.xaml.cs Source




Last, I ran the application and clicked the "Test" button. See Figure 15.


Figure 15 – Silver Sample Application




Summary
The Silver Sample application is simple, but it sets up a basic architecture that we can build from and proves out how to do the following:

• 1. How to create a WCF service, hosted within the web project generated by Visual Studio when we created the Silverlight application.
  


• 
  2. How to consume the WCF service, and the need to change the configuration setting in web.config to basicHttpBinding.
  


• 
  3. How to use a Generic List in the WCF service.
  


• 
  4. How to dynamically add controls to a Grid on the front–end.