Silverlight Application in SharePoint 2010

In my last post I have explained how to develop the Silverlight application using Visual Studio 2010. Then we deployed that application in SharePoint 2007 using Content Editor Webpart. In this post I will explain how to deploy the same application in SharePoint 2010 using Silverlight Webpart.

Note: Please click here for the Silverlight application development using Visual Studio 2010. This Hello World Silverlight application can be deployed on both SharePoint 2007 and 2010.

Deployment to SharePoint 2010

1. Go to the SharePoint portal.


2. Upload the SilverlightApp.xap to a document library.


3. Create a sample webpart page.


4. Open the page in Edit mode and from the ribbon select Editing Tools -> Insert -> Web Part.


5. From categories select Media and Content -> Silverlight Web Part -> Add.



6. Provide the URL of the SilverlightApp.xap file and hit OK.



7. It should look like this
   

Pretty easy hah! =]

Silverlight Application for SharePoint 2007

The goal of this post is to guide the .NET developers to write a basic Silverlight 3 application using Visual Studio 2010 and then deploying it to SharePoint 2007. Trust me its pretty easy :).

Development with Visual Studio 2010
Following are the steps to develop a simple Silverlight 3 application using Visual Studio 2010:

1. Launch Visual Studio 2010


2. Select File -> New -> Project -> Silverlight Application and hit Ok.



3. Uncheck Host the Silverlight Application in a new Web site and select OK. We don’t want to host our Silverlight application in a ASP.NET Web application rather we will host it in a simple HTML page. This HTML Page will get created by the project.


4. Now you are ready to do the development on MainPage.xaml.


5. Drop a Textbox(txtMessage) and a Button(btnGo) on MainPage.xaml from the Toolbox on the left.



6. Double click on the button to get it’s click event handler and paste following code there:
   



namespace SilverlightApp  
{  
public partial class MainPage : UserControl  
{  
    public MainPage()  
    {  
        InitializeComponent();  
    }  
    private void btnGo_Click(object sender, RoutedEventArgs e)  
    {  
        MessageBox.Show(this.txtMessage.Text);  
    }  
}  
}  



7. Go to bin folder and you will see a HTML file (In my case its SilverlightAppTestPage.html). Launch that HTML file and it should display your Silverlight application. Clicking the Go button should display the text entered in the Textbox.
   

Note: When Silverlight application is compiled, Visual Studio generates a XAP file (compiled silverlight application) which runs in a silverlight enabled browser. HTML page contains the object tag to load the Silverlight control which runs the Silverlight application.

Deployment to SharePoint 2010
Following are the steps to deploy the Silverlight application in to a SharePoint 2007 site:

1. Goto a SharePoint portal.


2. Upload the Silverlight.xap file in a document library.


3. Create a test ASPX page and add a Content Editor Web Part on it.


4. Paste following HTML object code in the ContentEditor Web Part:



<object type="application/x-silverlight-2" width="600" height="200">
    <param name="source" value="SilverlightApp.xap"/>
    <param name="minRuntimeVersion" value="3.0.40818.0" />
    <param name="background" value="white" />
</object>
<iframe id="_sl_historyFrame" style="height:0px;width:0px;border:0px"></iframe>



5. Make sure to change the parth of the XAP file from the document library.


6. Exit the edit mode.


7. The Silverlight application should be displayed in the test page.

Thanks for reading :).