Introduction

This document explains how to create a Silverlight solution in VS 2008 and then how to host the Silverlight control in a Web Application.

This document further explains how to create a WCF Service project as part of the above solution, how to host the WCF Service in IIS 6.5, how to consume the Service from Silverlight control in a Web Application and then finally how to place the Silverlight control in a WSS/MOSS 2007 Web Page using a Web Part.

Requirements

• Visual Studio 2008 with SP1
• Silverlight from (Silverlight3_Tools.exe)
• SharePoint (WSS or MOSS 2007)
• If you are running IIS 6.5 machine add the following two Mime Types to the WSS/MOSS 2007 website where you would place this Silverlight control: .xap application/x-silverlight-app and .xaml application/xaml+xml

Create a new Visual Studio 2008 (SP1) Silverlight project

• Open Visual Studio 2008
• File -> new -> Project

• Project type -> Visual C# -> Silverlight
• Select Silverlight Application template
• Type the project name, “SilverlightConsumingWCF”
• Select “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS” for the location of the project
• Click OK. You will see the following.

• Click OK. You will see the following.

The new Silverlight UserControl MainPage.xaml is shown in the design page.

• Drag a StackPanel from the toolbox and place inside the grid.
• Drag a Label control from the toolbox and place inside the StackPanel.
• Drag another Label control from the toolbox and place inside the StackPanel.
• Drag a textbox control from the toolbox and place inside the StackPanel.
• Drag a Button control from the toolbox and place inside the StackPanel.
• Add Click Event Handler for the button
• Finally make the XAML look like the following

• Hit F5. You will see the following.

All the controls are visible in the page. The word “Data” is visible in the top Label Control.

The SilverLight control is placed in the test aspx page as an object using <object> tag.

Add a new Visual Studio 2008 (SP1) WCF project named WcfConsumedBySilverlight to the solution

• Right click the solution SilverlightConsumingWCF
• add -> newProject
• Project type -> Visual C# -> Web
• Select the “WCF Service Application” template
• Name the project “WcfConsumedBySilverlight”.

• Click OK. You will see the following.

A new WCF project named “WcfConsumedBySilverlight” is added to the solution

• Enable “anonymous access” for the “WcfConsumedBySilverlight” folder in IIS
• Expand the new “WcfConsumedBySilverlight” project Folder.
• Double click Web.config file in the folder.
• Search and change wsHttpBinding to basicHttpBinding.
• Build the Solution.
• Expand the “SilverlightConsumingWCF” project Folder.
• Right click “SilverlightConsumingWCF” project.
• Click “Add Service Reference” menu item.

You will see the following.

Click “Add Service Reference” menu item. You will see the following.

• Choose the address of WCF endpoint like the following http://wssdev/_layouts/SilverlightConsumingWCF/WcfService1/Service1.svc, where wssdev is your machine name.
• By choosing the adress this way you would use a permanent address rather than VS auto-genarated address which could change after rebooting your system.
• Click OK. This will add the Wcf service reference to the SilverLight project.
• Open MainPage.xaml.cs file
• Add “using SilverlightConsumingWCF.ServiceReference1;” at the top

Modify the class code to finally look like the following

• Build the solution
• Add a file named “clientaccesspolicy.xml “ to the “WcfConsumedBySilverlight” project
• Add the following code to the above file

Build the solution and Hit F5 and you should see the following.

Type in a number, xxx, in textbox and click “Consume WCF” button. “You Entered xxx” is returned from the WCF Service and is displayed in the Label Control above.

At this point we have successfully created a Silverlight control and put that contol in a test aspx/html page and WCF has successfully returned the result of an operation.

Our next steps are to host this Silverlight Control in a SP page.

Copy the C:\Program Files\Common Files\Microsoft Shared\web serverextensions\12\TEMPLATE\LAYOUTS\SilverlightConsumingWCF\SilverlightConsumingWCF.Web\ClientBin folder to the root folder of the WSS/SharePoint WebSite C:\Inetpub\wwwroot\wss\VirtualDirectories\80

GoTo the home page of your WSS/MOSS 2007 website such as http://wssdev/Pages/Default.aspx, where “wssdev” is your machine name. Edit the Page and Add WebPart.

• Select “Content Editor Web Part” from Miscillanous section
• Click Add
• Click open the tool pane in the new web part editing page
• Click “Source Editor” and you will see the following

Open the file C:\Program Files\Common Files\Microsoft Shared\web serverextensions\12\TEMPLATE\LAYOUTS\SilverlightConsumingWCF\SilverlightConsumingWCF.Web\SilverlightConsumingWCFTestPage.html in your “SilverlightConsumingWCF.Web” project

Copy the following script from the file

• Paste it to Dialog Box opened in step 32 above
• Change width="100%" height="100%" to width ="300px" height="300px".
• Change “ClientBin/ SilverlightConsumingWCF.xap” to “http://wssdev/ClientBin/ SilverlightConsumingWCF.xap” in the script where wssdev is your machine name
• Click OK

Publish the page and you will see the webpart display the Siverlight Control as below.

About the sample code

The attached file is the original VS 2008 solution. To use this solution unzip the file in the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS" folder. Open the solution in VS and then re-do the "Service Reference" in the "SilverlightConsumingWCF" project. Here you will provide your own machinename for the Silverlight to be able to consume the WCF service correctly and properly. For best results delete the existing "Service Reference" and add it again.

About Majid Malik

Sorry, no bio is available View complete profile here.

---

Discussion

Subject	Author	Date
Adding Service Reference	Hai Tran	4/1/2010 9:29 AM
When I try to add the service reference by putting in the machine name, I get the an error occurred while attempt to find services. Reply | Permanent link

---

Please login to rate or to leave a comment.