After creating my WCF service and hosting it on Azure, it’s time to take care of the last of my requirements: consuming it in a Silverlight control. Before I go into the Silverlight code, let me point out that I had to make a couple of changes to my Windows Azure service: one regards Silverlight consumption, the other one regarding hosting the service in a reachable manner.

As you are probably aware, you can’t access external (different from the current domain) urls from a Silverlight application, unless you configure it to run in the desktop and with elevated privileges (which is always an option that your users must allow). In this case, my requirement clearly states that this Silverlight application will run in the context of a browser, so that is not an option for me. In order for Silverlight to access my service, I added a file called ClientAccessPolicy.xml in the root of my service application in Windows Azure with the following code:

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

<access-policy>

  <cross-domain-access>

    <policy>

      <allow-from http-request-headers="SOAPAction">

        <domain uri="*"/>

      </allow-from>

      <grant-to>

        <resource path="/" include-subpaths="true"/>

      </grant-to>

    </policy>

  </cross-domain-access>

</access-policy>


This basically allows this service to be called from everywhere. You might want to restrict things a bit more, but in my case it will do perfectly.

The second change I made to the service was adding a new service behavior configuration. Turns out I couldn’t add a service reference to my service hosted in Azure. I didn’t have that error before because I built my console client using the service in my local machine then simply changed the endpoint to target my hosted service. I found this article that explains the problem I was having:

http://code.msdn.microsoft.com/wcfazure/Wiki/View.aspx?title=KnownIssues

After that, I could successfully add a service reference to my service in Visual Studio. So, I guess it’s time to start developing some Silverlight code. A warning first though, I’m the most terrible designer you are likely to meet in the near future so I didn’t try to do anything too fancy, except for a couple of simple animations that will run as we do the initial load of information. If I had enough time I could probably make this a whole lot prettier and more “Silverlightish” but the truth is I can’t afford to spend too much time on this. And to be honest, the main purpose of this is to show how easy it is to connect to a WCF service in Azure, so there is no point in spending too much time in the UI design.

The only real difference in accessing a WCF service from Silverlight, compared to the console application I created, is that we have to do it asynchronously as Silverlight doesn’t allow synchronous calls (which make perfect sense). The main methods that really matter in my Silverlight application are detailed here:

void GetTechnologies()

 {

     WCFService.TechResourcesClient client = new WCFService.TechResourcesClient();

     client.GetTechnologiesCompleted += new EventHandler<WCFService.GetTechnologiesCompletedEventArgs>(client_GetTechnologiesCompleted);

     client.GetTechnologiesAsync();

 }

 

 void client_GetTechnologiesCompleted(object sender, WCFService.GetTechnologiesCompletedEventArgs e)

 {

     Technology[] list = (WCFService.Technology[]) e.Result;

 

     for (int i=0; i < list.Length; i++)

     {

        Technology t = list[i];

         techList.Add(t);

     }

       

     //set current technology

     currentTechnology = 0;

     TechnologiesFetched = true;

       

     StartupUI();

 }


Basically, once the Silverlight page loads, we call the GetTechnologies method. I previously added a reference to my Azure service and named it WCFService. The code creates the proxy class, sets an event handler to be called once the service call completes, and begins the call asynchronously.

Once the call gets completed, we simply iterate through the results and store the information in a predefined list we have defined (techList). I created a method called StartupUI that basically looks at the current technology index, and binds the data to simple Silverlight Controls.

Every time we switch the current selected technology, we need to load the list of resources available (though we could use some caching in order to avoid unnecessary calls). That is done using very similar code to what was previously shown:

void GetResources(int id)

{

    WCFService.TechResourcesClient client = new TechResourcesClient();

    client.GetResourcesForTechnologyIdCompleted += new EventHandler<GetResourcesForTechnologyIdCompletedEventArgs>(client_GetResourcesForTechnologyIdCompleted);

    client.GetResourcesForTechnologyIdAsync(id);

}

 

void client_GetResourcesForTechnologyIdCompleted(object sender, GetResourcesForTechnologyIdCompletedEventArgs e)

{

    Resource[] list = (WCFService.Resource[]) e.Result;

    resourceList.Clear();

       

    foreach (Resource r in list)

    {

        resourceList.Add(r);

    }

       

    BindStackPanel();   

}


In this case we call the GetResourcesForTechnologyId method in my service, passing the id of the current selected technology. We receive a list of results, copy them over to a predefined list and call a method named BindStackPanel that created that center UI you can see in the picture above.

Yes, it really is that simple! The full code is a bit more complex but everything else is just UI management code. You can test the application by following this link (yes, I also hosted in on my Azure account, but this could be reused in any site):

http://techresourcesdemo.cloudapp.net/SilverlightDemo/SilverlightDemo.html

In the next post in this series, I will add a way to write information to the database as well through the WCF service, using the same Silverlight client. I will also provide a link to download the full source code, if you want to try it yourself.

Until then, have fun!