Yesterday at the BASTA! keynote I wrote an application on the fly showing how to write a WCF service and then call it from Silverlight asynchronously. Instead of posting the code, I figured that I would put up a walk through.

Getting Started

To get started fire up Visual Studio and start a new Silverlight 3.0 project. In order to use Silverlight 3.0 you will need the Silverlight 3.0 SDK installed. Once you have the new Silverlight application up and running you should have two solutions up and running, one with the Web host and one with the Silverlight XAML files. Right click on the Web project and choose Add|New Item and choose WCF Service.

Once you select the WCF Service, give it a name, I chose Basta1, but you can name it whatever you want. Next you will be brought into the interface file or Iyourservicename.cs. Here you have to define your POCO class as well as the method signature of your service.

In the demo I made a class of RockBand as shown here:

   1:  //POCO

   2:  public class RockBand

   3:  {

   4:    public int RockkBandId { get; set; }

   5:    public string RockkBandName { get; set; }

   6:  }

This is the definition of our “POCO” or “plain old CLR object” class. No attributes or any logic about the underlying database, just a simple CLR object. I am using a pretty simple design here, so if you are looking for some more complex demos or examples of using databases and ORM, check out my blog series on the Telerik WCF OpenAccess Wizard.

Now we have to define the WCF service contract. I will create a simple method, ReturnRockBands that will return a List of RockBand. Here we just define the method’s interface, we will implement the method in the service class.

   1:  [ServiceContract]

   2:  public interface IBasta1

   3:  {

   4:      [OperationContract]

   5:      List<RockBand> ReturnRockBanks();

   6:  }

Now just save the interface file and then go ahead and open the code behind of the SVC service file. We will implement the service contract interface of ReturnRockBanks (notice that I made a typo in my demo, hey you try coding in front of 500 people!)

   1:  public class Basta1 : IBasta1

   2:  {

   3:      public List<RockBand> ReturnRockBanks()

   4:      {

   5:          List<RockBand> rockbands = new List<RockBand>();

   6:   

   7:          rockbands.Add(new RockBand() { RockkBandId = 1, RockkBandName = "Depeche Mode" });

   8:          rockbands.Add(new RockBand() { RockkBandId = 2, RockkBandName = "The Smiths" });

   9:          rockbands.Add(new RockBand() { RockkBandId = 4, RockkBandName = "Britney Spears" });

  10:   

  11:          return rockbands;

  12:      }

  13:  }

  14:  }

This code is pretty straight forward, our class implements the interface we just created in line 1 and our method fills a List of RockBand and returns that list. We will now consume this service in Silverlight. But before we do that we have to change our WCF binding to basic in the web.config:

<endpoint address="" binding="basicHttpBinding" contract="SilverlightApplication20.Web.IBasta1">

Now just save (and compile) the project and let’s move into our client.

Building the Silverlight Client

We will create a simple Grid and a button in our XAML. When the user clicks on the button, we will call the WCF service and bind the data to the grid. Pretty simple application, but I just want to demonstrate how easy it is to do. A real application is not that much harder.

   1:  <StackPanel>

   2:  <data:DataGrid Name="MyGrid">

   3:   </data:DataGrid>

   4:  <Button Name="MyButton" Content="Push Me!" Click="Button_Click"

   5:  ></Button>

   6:  </StackPanel>

Since we defined a Click event for the button in line 4, let’s go into the C# code behind and call our WCF service. But first we have to set a reference to our service, we do that by right clicking on the “references” item in our solution and say “Add service reference.” Choose the reference we just created (by hitting the discover button) and we are good to go.

Now we have to do two things. First we have to set up a reference to our service proxy that was just created. This is done in line 3 and then we have to set an event to fire when our asynchronous call to the ReturnRockBank completes. This is done on line 4 and the method name to catch the event is called wcf_ReturnRockBanksCompleted. Lastly we call our WCF service’s method in line 6. Notice that the proxy added the “async” suffix to our method.

   1:  private void Button_Click(object sender, RoutedEventArgs e)

   2:  {

   3:      Basta1Client wcf = new Basta1Client();

   4:      wcf.ReturnRockBanksCompleted +=  wcf_ReturnRockBanksCompleted;

   5:      //call method WCF

   6:      wcf.ReturnRockBanksAsync();

   7:  }

Now we have to catch this event when it is done firing. We do that by implementing wcf_ReturnRockBanksCompleted. Then all we have to do is bind our data grid to the “result” in the event arguments (line 4).

   1:  void wcf_ReturnRockBanksCompleted(object sender, 

   2:          ReturnRockBanksCompletedEventArgs e)

   3:  {

   4:      MyGrid.ItemsSource = e.Result;

   5:  }

That’s it to get WCF services to work with Silverlight. When we run this and push the button, our application looks like this:

Now to make this a “real” application that is not hard coded, all you have to do is create WCF services for your CRUD methods and fill your POCO object with data from your database. There are tons of different approaches to doing that, you can check out some methods in my blog post here.

Enjoy!