Create the Silverlight Application
If you’ve read my two previous posts on the subject, (Part 1 and Part 2) you will know that I promised to do a part 3 to this series that will show how to wire up what we did in creating our N-Tier solution using WCF and Entity Framework to an actual application. In this case, we will create a Silverlight application that can consume our WCF services and display them on a page. This will not be as long as the other two posts, but it should give you a general idea of how this is to be done.
The first order of business is to create a new Silverlight application. In this case, we are going to add it to the solution that we created in the previous posts. It is called “BurnNotice”. Once again, if you do not know what Burn Notice is, my heard bleeds for you … check it out here … but it won’t affect your understanding of the example. To do this, right click on the solution itself and choose the option “Add > New Project” as shown in the screenshot.
The “Add New Project” dialog box will appear and you can select any kind of Silverlight application that you would like, but I generally like to choose the “Silverlight Navigation Application” as it comes pre-wired with some pages and navigation controls. You can make your own by adding additional controls in the same manner.
After selecting the type of Silverlight application that you want, you will be presented with the “New Silverlight Application” dialog. This will allow you to host the Silverlight application inside of a web application that Visual Studio will create for you. Assuming that you have not already added a web application to your solution, you can accept most of the default values. Of course you can name it whatever you want. My options were as follows:
After you have clicked the “OK” button, Visual Studio will add two new projects to your solution. The first of the two will be the Silverlight application from which you will connect to WCF Services created previously. The second will be the web application to host your Silverlight application so that it can be viewed in a browser. For the purposes of debugging, you will want to have the web application as the default project. If you selected the “Silverlight Navigation Project”, then you will also see a basic UI setup in the Design pane as shown in the following screenshot.
The web application project will have two pages designed to host your Silverlight application, one a web form and the other a standard html page like so:
The names of these two pages will be abnormally long as they include the name of the project along with “TestPage” added to the end. You don’t need to change them, but if you are going to be typing the address into a browser, it makes sense to change the name of the page to something more standard. I personally got rid of the html page altogether and then renamed the web form to “default.aspx” like this:
Add a Reference to the WCF Service
At this point we are almost home free. The last step to actually use the service that we created previously is to add a reference to the Silverlight project. In this case, instead of adding a standard reference, though, we want to add a reference to the service itself. To do this, right click on the project name and select “Add Service Reference…” as shown below:
This will bring up the “Add Service Reference” dialog box. In the Address box, enter the local URL of the service that you created, unless, of course, you have already deployed it somewhere in which case you can reference it there. After entering the URL, click on the “Go” button and any services discovered at the URL will be listed in the “Operations” box on the right. If none appear then either the URL you entered is incorrect or the service itself is not functioning properly as shown in the screenshot. You will also need to enter the Namespace which you want the reference to belong to. This can also be called whatever you want, but the default will have the word “service” in it so that later, while programming, you will know at a glance that any of the methods inside of it are from a service as opposed to another local project.
After adding the service, you will now see a new folder in your project called “Service References” and below it you will find the service that you have just created. It will be named whatever you called the namespace in the “Add Service Reference” dialog. It will look like so:
Call the service to populate a Silverlight control
At this point, the only task left is to call the service and use the data returned to populate a control. To do this, open one of the .xaml pages that were created when the Silverlight application was created. Since this is only an example it does not particularly matter which one. In my case, I will do it on the “Home.xaml” page. Once the page is opened in the design view, open the “Toolbox” on the left side of the page as shown in the screenshot. Under the sub heading “Common Silverlight Controls” you will see one called “DataGrid” (not to be confused with the “Grid” control which is used for layout purposes). Click on the DataGrid icon and drag it onto the designer surface.
This should end up giving you some code that looks basically like this:
<navigation:Page x:Class="BurnNotice.UI.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
Title="Home"
Style="{StaticResource PageStyle}" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot">
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<StackPanel x:Name="ContentStackPanel">
<TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}" Text="Home"/>
<TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}" Text="Home page content"/>
<sdk:DataGrid AutoGenerateColumns=True" Name="dgSpies" />
</StackPanel>
</ScrollViewer>
</Grid>
</navigation:Page>
Right now, I am not going to go into a tutorial on .xaml files or how to acutally create and lay out a page using silverlight, but I do want to show how easy it now is to call the actual service and populate the grid. You will notice that I am just letting Silverlight autopopulate everything for the sake of simplicity. Obviously all of that can be customized. So, in the code behind to the .xaml page, all you need to do is set up some code in the “OnNavigatedTo” event that will call the service. All calls to a service like this are done asynchronously so once the call is done, you also need to set up a delegate that will be invoked when the results from the service are returned. This is very easy to do and the events are built into the service that we have already created. The code to do this looks like so:
namespace BurnNotice.UI
{
public partial class Home : Page
{
public Home()
{
InitializeComponent();
}
// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
BurnNoticeServiceClient client = new BurnNoticeServiceClient();
client.Characters_GetAllCompleted += new EventHandler<Characters_GetAllCompletedEventArgs>(Characters_GetAll_Completed);
client.Characters_GetAllAsync();
}
private void Characters_GetAll_Completed(object sender, Characters_GetAllCompletedEventArgs e)
{
dgSpies.ItemsSource = e.Result;
}
}
}
Depending on the speed, you might notice a bit of a lag time between initially calling the service and having the grid populated, but after it is called and the delegate executed … Voila, you have a populated datagrid on a silverlight page that looks like this (notice that Tricia Helfer is mentioned in the grid … Ahhh Tricia).
[...] part three of this tutorial, I show how to do that last part of this process, which is to call the service [...]
[...] create, and service consume (from [...]