Integrating Silverlight in SharePoint 2010

Introduction:

The purpose of this article is to provide step by step information about how to implement the Silverlight application in SharePoint 2010 as a webpart.

Step involved is explained below.

Requirements:

1. A local installation of either SharePoint Foundation 2010 or SharePoint Server 2010,
2. Silverlight 3.0 and
3. Visual Studio 2010.

Create Silverlight Application:

1. To publish a Silverlight application on a SharePoint site, open Visual Studio 2010.
2. Go to File->New->Project.
3. Select Silverlight Application under Installed Templates and enter a name for the Application as SLAnimation.
   
   
   
   
4. Click OK.
   
   
   
   
5. Uncheck the checkbox in the prompt that asks if you wish to create a web application to host the Silverlight application. As SharePoint itself acts as the host, hosting Silverlight on a separate application is not necessary.
6. Open MainPage.xaml and do the customizations. I have created a rectangle inside the Grid which will move to and fro horizontally. See the code in the below table.
   
   <UserControl x:Class="SLAnimation.MainPage"
       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"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400">
       <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
           <Grid.Resources>
               <Storyboard x:Name="myStoryBoard">
                   <DoubleAnimation Storyboard.TargetName="myTranslateTransform"
                                    Storyboard.TargetProperty="X"
                                    To="100"
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Duration="0:0:1">
                   </DoubleAnimation>
               </Storyboard>
           </Grid.Resources>
           <Rectangle Height="50" Width="50" Margin="12,34,338,216" Fill="Black">
               <Rectangle.RenderTransform>
                   <TranslateTransform x:Name="myTranslateTransform">
                   </TranslateTransform>
               </Rectangle.RenderTransform>
           </Rectangle>
       </Grid>
   </UserControl>
   
   
7. In the code behind MainPage.xaml.cs.
   
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Net;
   using System.Windows;
   using System.Windows.Controls;
   using System.Windows.Documents;
   using System.Windows.Input;
   using System.Windows.Media;
   using System.Windows.Media.Animation;
   using System.Windows.Shapes;
   namespace SLAnimation
   {
       public partial class MainPage : UserControl
       {
           public MainPage()
           {
               InitializeComponent();
           }
           private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
           {
               myStoryBoard.Begin();
           }
       }
   }
   
   
8. Save the project and close it.

Create SharePoint Project:

1. Restart Visual Studio as an Administrator.
2. Right click the solution and select Add -> New Project.
3. Then select SharePoint -> 2010 as the project type.
4. In the Add New Project dialog, select Empty SharePoint Project.
5. Enter the name as SLAnimationInSP and then click OK.
   
   
   
   
6. In the SharePoint customization wizard dialog, enter the URL to which you want to deploy the solution, leave the sandboxed solution checked and then click OK.
   
   
   
   
7. In the Solution Explorer, right click the SharePoint project and select Add -> New Item.
8. In the Add New Item dialog, select Module and name it as SLAnimationInSPModule.
   
   
   
   
9. Click Add.
10. Next, right click the new Module and select Properties.
11. The Properties window will be displayed. Click Project Output References and then click the ellipse button (…).
    
    
    
    
12. The Project Output References dialog will be displayed.
    
    
    
    
13. Next, click Add, expand the deployment location property to change the Project Name to SLAnimation and the Deployment Type to Element File.
14. Now expand the module that was created in the SharePoint project and delete the Sample.txt file.
15. Edit the Elements.xml file to include the xap file that is generated by the Silverlight application.

Create Document Library:

1. There are a number of places we can deploy our Silverlight XAP file to SharePoint.
2. There are a number of places we can deploy our Silverlight XAP file to SharePoint.
3. The web's ClientBin folder is sometimes used, but we can't use the WSP file or our tools to deploy it there.
4. Another deployment location option is the SharePoint hive.
5. The decision of where to place the file depends on the scope of your application.
6. The most common and easily controlled location is a Document Library.
7. Uploading your XAP files to this list makes it easy to control permissions to the application and keeps them all in one location that's easy to find and update.
8. Right-click the SLAnimationInSP node in Solution Explorer and then select Add -> New Item.
   
   
   
   
9. Select the SharePoint -> 2010 List Instance project item template, name it "XAPDocumentLibrary".
   
   
   
   
10. In the wizard, change the name to "XAPDocumentLibrary", choose "Document Library" as the type of list, and the relative URL for this list to "Lists/ XAPDocumentLibrary" and then click Finish.
11. This project item will automatically be packaged and deployed with the module we created earlier.
12. Now that we have a list to host the XAP file, we need to tell SharePoint where to deploy it.
13. Expand the SLAnimationInSPModule node in Solution Explorer and open the Elements.xml file.
14. Add the File node to the Modules parent node using the following.
    
    <? xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <Module Name="SLAnimationInSPModule">
      <File Path="Module\SLAnimation.xap" Url="Lists\XAPDocumentLibrary/SLAnimation.xap" />
    </Module>
    </Elements>

Deployment:

1. The application is now ready for deployment.
2. Right click the SharePoint project and select Set as Startup Project.
3. Then hit F5 key on your keyboard to build and deploy to your local SharePoint site.
4. Go to Site Actions->Site Settings->Gallery->Solutions.
5. You can see the Sandbox Solution installed.
   
   
   
   
6. Go to home page and click the Insert tab in the Editing Tools.
7. Select the Media and Content category in the left column and then Silverlight Web Part.
   
   
   
   
8. Finally, click Add.
9. The Silverlight Web Part dialog will be displayed.
10. Enter the location of the XAP file in the URL text box (~site/Lists/XAPDocumentLibrary/SLAnimation.xap) and click OK.
    
    
    
    
11. Finally, click Save and your Silverlight application is integrated into your SharePoint site.

Conclusion:

Finally the Silverlight application is integrated with SharePoint 2010 as a webpart.