Silverlight Integration with SharePoint 2010 – Part I

In this article, we will see how Silverlight can be used in SharePoint 2010. This article is Part I of Silverlight Integration with SharePoint 2010  where we will see how to use different Web Parts of Silverlight in SharePoint.

Update: Part 2 of this article can be read here Read SharePoint 2010 List in Silverlight using REST – Silverlight with SharePoint 2010 - Part II

The first step is to create a SharePoint site using ‘Team Site’ template. The steps remain the same as shown in my previous article, SharePoint Dashboard with Common Filters using PerformancePoint Services 2010 Now after you have created a SharePoint site with ‘Team Site’ template, let’s add a special library called ‘Asset Library’. This library is used to store video files.

The First step is – Go To ‘Site Action’ menu and click on ‘View All Site Content’ menu as shown below –

This will show you all the available contents in the site. Click on ‘Create’ link button as shown below –

This brings up a ‘Create’ dialog box. One thing to notice here is if you right click the ‘Create’ dialog box, it will show that it is a Silverlight Window. Now, click on ‘Library’ group and make a choice of ‘Asset Library’. Name the library as ‘Discovery Videos’ and click ‘Create’ button as shown below –

 Now we have created a library, let’s add a couple of videos in that library. I am adding three videos to the library as shown below –

Now if you mouse hover on any of the video file, it will show you a dialog box. By using this dialog box you can – 1) Play the Video. 2) View the Item. 3) View its properties. 4) Edit its properties.

Click on ‘Play’ and it will start a Silverlight Media player where you can view your video as shown below –

Anyways, this is not an objective of our demo. Let’s go to the home page on our SharePoint site. Now click on the ‘Edit’ button as shown below –

Once we edit the page, go to ‘Insert’ tab and click on the ‘Web Part’ button as shown below –

You will see the available web parts list for our Team site. From the web parts categories, choose ‘Media and Content’. You will observe that web part ‘Media Web Part’ is not in the list to the right, as shown below –

For getting the ‘Media Web Part’, we will have to first activate a feature called ‘SharePoint Server Publishing Infrastructure’. To activate this feature go to ‘Site Action’ menu and click on ‘Site Settings’. From the site settings page make a choice of ‘Site Collection Features’ from the group ‘Site Collection Administration’ as shown below –

This will list out all the features of Site collection. From that list, find a feature called ‘SharePoint Server Publishing Infrastructure’. If you observe below, by default it is not activated. So click on the ‘Activate’ button and the feature will now be activated as shown below –

 Now let’s get back to our home page. Click on ‘Edit’ button as shown above and choose ‘Media and Content’ group and now you will see a ‘Media Web Part’ as shown below –

So let’s insert ‘Media Web Part’ on our page. This will show a link ‘Click here to Configure’. Once you click on the Media web part, it shows you the different options for the Media web part as shown below –

If you observe, there are a few properties which can be changed easily. For example – 1) We can change the web part title. 2) We can change the size. 3) Start media automatically. But for this demonstration, we need to focus on an important property called ‘Change Media’. We will browse the media file from our ‘Asset Library’ which we created a short while ago. So let’s click on ‘Change Media’ and ‘From SharePoint’ as shown above. This will show you a dialog box to select an asset. Choose ‘Discovery Videos’ library and choose a video and click the ‘OK’ button as shown below –

Click on the ‘Save’ button, as we have made changes in the web page. Now play your video.

This is a very simple demonstration of using a ‘Media Web Part’. Please note that SharePoint 2010 uses Silverlight 3.0.  

Silverlight Web Part in SharePoint 2010

Now let’s have a look at ‘Silverlight Web Part’ in SharePoint 2010. First of all, you need to create a Silverlight application. If you already have a Silverlight application, you can use the same for this demonstration. I have already created a simple Silverlight application which displays data in a Datagrid. When you click the Datagrid row, it plays a small nice 3D animation using plane projection and displays the DataGrid row data in a chart format. Here is an image of my application –

If you want to download the code for the above demonstration, please visit DevCurry.com and check the article – Silverlight 3D using Plane Projection.

Now we will show this application in our SharePoint Silverlight web part. For this you can upload a ‘.XAP’ file to the SharePoint site or you can keep your ‘.XAP’ file under the SharePoint folder in the following path– C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin

For this demonstration, I will create a ‘Document Library’ and will upload my ‘.XAP’ file to the same. The steps will remain the same as shown above at the beginning of this article (while creating an ‘Asset Library’). I will name this library as ‘Silverlight Storage’. Once you create a library, browse your ‘.XAP’ file and add it in the library as shown below –

Now if you don’t want this library to be displayed in ‘Left Navigation Pane’, click on ‘Library Settings’ and choose ‘Title, Description and Navigation’ from the ‘General Settings’ group. Now select the ‘No’ option from ‘Display this document library on the Quick Launch’ as shown below –

Let’s go back to our Home page and click on the ‘Edit’ button as described in the above steps. Now click on ‘Insert’ tab and Web Parts button as described in above steps. Now from the ‘Media and Contents’ group, choose ‘Silverlight Web Part’ and click on ‘Add’ button as shown below –

This will ask you for an URL for your ‘XAP’ file. Set the URL of ‘XAP’ file from the document library in which we have uploaded our ‘XAP’ file. Here’s a sample url – http://localhost:21068/Silverlight%20Storage/SLDataGridExample.xap You can get this URL by right clicking your .XAP file from the library and click on ‘Copy Shortcut’. Once you are done with setting the URL, click the OK button. If you want to change the Height and Width of the web part, edit the web part. Now save your changes and you will see your Silverlight application in our SharePoint Site, as shown below –

Summary – In this article, we have saw how to use display media files in SharePoint 2010 using ‘Media Web Part’. We have also seen how to use existing or newly created Silverlight applications in SharePoint 2010, using the ‘Silverlight Web Part’.

Update: Part 2 of this article can be read here Read SharePoint 2010 List in Silverlight using REST – Silverlight with SharePoint 2010 - Part II

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com