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:

  • A local installation of either SharePoint Foundation 2010 or SharePoint Server 2010,

  • Silverlight 3.0 and

  • Visual Studio 2010.


Create Silverlight Application:

  • To publish a Silverlight application on a SharePoint site, open Visual Studio 2010.

  • Go to File->New->Project.

  • Select Silverlight Application under Installed Templates and enter a name for the Application as SLAnimation.


  • Click OK.


  • 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.

  • 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.

  1. <UserControl x:Class="SLAnimation.MainPage"

  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

  6. <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

  7. <Grid.Resources>

  8. <Storyboard x:Name="myStoryBoard">

  9. <DoubleAnimation Storyboard.TargetName="myTranslateTransform" Storyboard.TargetProperty="X" To="100" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:1">

  10. </DoubleAnimation>

  11. </Storyboard>

  12. </Grid.Resources>

  13. <Rectangle Height="50" Width="50" Margin="12,34,338,216" Fill="Black">

  14. <Rectangle.RenderTransform>

  15. <TranslateTransform x:Name="myTranslateTransform">

  16. </TranslateTransform>

  17. </Rectangle.RenderTransform>

  18. </Rectangle> </Grid>

  19. </UserControl>

  • In the code behind MainPage.xaml.cs.

  1. using System;

  2. using System.Collections.Generic;

  3. using System.Linq;

  4. using System.Net;

  5. using System.Windows;

  6. using System.Windows.Controls;

  7. using System.Windows.Documents;

  8. using System.Windows.Input;

  9. using System.Windows.Media;

  10. using System.Windows.Media.Animation;

  11. using System.Windows.Shapes;

  12. namespace SLAnimation

  13. {

  14. public partial class MainPage : UserControl

  15. {

  16. public MainPage()

  17. {

  18. InitializeComponent();

  19. }

  20. private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

  21. {

  22. myStoryBoard.Begin();

  23. }

  24. }

  25. }

  • Save the project and close it.


Create SharePoint Project:

  • Restart Visual Studio as an Administrator.

  • Right click the solution and select Add -> New Project.

  • Then select SharePoint -> 2010 as the project type.

  • In the Add New Project dialog, select Empty SharePoint Project.

  • Enter the name as SLAnimationInSP and then click OK.


  • 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.


  • In the Solution Explorer, right click the SharePoint project and select Add -> New Item.

  • In the Add New Item dialog, select Module and name it as SLAnimationInSPModule.


  • Click Add.

  • Next, right click the new Module and select Properties.

  • The Properties window will be displayed. Click Project Output References and then click the ellipse button (…).


  • The Project Output References dialog will be displayed.


  • Next, click Add, expand the deployment location property to change the Project Name to SLAnimation and the Deployment Type to Element File.

  • Now expand the module that was created in the SharePoint project and delete the Sample.txt file.

  • Edit the Elements.xml file to include the xap file that is generated by the Silverlight application.


Create Document Library:

  • There are a number of places we can deploy our Silverlight XAP file to SharePoint.

  • There are a number of places we can deploy our Silverlight XAP file to SharePoint.

  • The web's ClientBin folder is sometimes used, but we can't use the WSP file or our tools to deploy it there.

  • Another deployment location option is the SharePoint hive.

  • The decision of where to place the file depends on the scope of your application.

  • The most common and easily controlled location is a Document Library.

  • 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.

  • Right-click the SLAnimationInSP node in Solution Explorer and then select Add -> New Item.


  • Select the SharePoint -> 2010 List Instance project item template, name it "XAPDocumentLibrary".


  • 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.

  • This project item will automatically be packaged and deployed with the module we created earlier.

  • Now that we have a list to host the XAP file, we need to tell SharePoint where to deploy it.

  • Expand the SLAnimationInSPModule node in Solution Explorer and open the Elements.xml file.

  • Add the File node to the Modules parent node using the following.

  1. <? xml version="1.0" encoding="utf-8"?>

  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  3. <Module Name="SLAnimationInSPModule">

  4. <File Path="Module\SLAnimation.xap" Url="Lists\XAPDocumentLibrary/SLAnimation.xap" />

  5. </Module>

  6. </Elements>


Deployment:

  • The application is now ready for deployment.

  • Right click the SharePoint project and select Set as Startup Project.

  • Then hit F5 key on your keyboard to build and deploy to your local SharePoint site.

  • Go to Site Actions->Site Settings->Gallery->Solutions.

  • You can see the Sandbox Solution installed.


  • Go to home page and click the Insert tab in the Editing Tools.

  • Select the Media and Content category in the left column and then Silverlight Web Part.


  • Finally, click Add.

  • The Silverlight Web Part dialog will be displayed.

  • Enter the location of the XAP file in the URL text box (~site/Lists/XAPDocumentLibrary/SLAnimation.xap) and click OK.


  • 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.

Recent Posts

See All