Silverlight Enabled WebPart Tutorial

[Wokawidget]

Overview

There are a few steps that must be completed in the right order for the development and testing of a Silverlight enabled WebPart.


Install WSS 3.0
Install VS 2008 and VS 2008 SP 1
Install Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12)
Install Silverlight Tools 2.0 for Visual Studio 2008
Modify the Sharepoint Web.Config to include Web Extensions and Silverlight assemblies
Add the XAP MIME-Type to IIS
Create a sample Silverlight control
Create a sample WebPart control
Copy the output from the Silverlight project to the Sharepoint server
Configure the WebPart in Sharepoint
Test

The following posts will walk you through the above steps.

[Wokawidget]

First of all you need to download and install Sharepoint.
This can be downloaded from the following Url:

http://www.microsoft.com/DownLoads/details.aspx?familyid=EF93E453-75F1-45DF-8C6F-4565E8549C2A&displaylang=en

When installing Sharepoint select the option to install the database locally, unless you have an SQL Server instance installed for Sharepoint to use.

If you setup a sharepoint service account specifically for use with the Sharepoint app pool identity, then you may get the following error in the System section of the Event log:

The application-specific permission settings do not grant Local Activation permission for the COM Server application with CLSID
{61738644-F196-11D0-9953-00C04FD919C1}
to the user DEVLAB\SharepointServiceAcc SID (S-1-5-21-3130128137-2669382741-1398243744-1109). This security permission can be modified using the Component Services administrative tool.

For more information, see Help and Support Center at http://go.microsoft.com/fwlink/events.asp.

In this case my sharepoint identity account was specified as SharepointServiceAcct during the Sharepoint install procedure.
To find the exact component service that is generating this error open RegEdit and search for the Guid {61738644-F196-11D0-9953-00C04FD919C1} in the registry. Once found it will show the exact component service you need to edit...in this case it's the IIS WAMREG Admin Service.

If you see this error then you need to make sure that the Sharepoint app pool acct identity has Local Launch and Local Activation permissions for the IIS WAMREG Admin Service:

Open component services and browse to Computers-->My Computer-->DCOM Config-->IIS WAMREG Admin Service and click properties
Click on the Security tab and for the Launch and Activation Permissions make sure that Customize is selected and then click Edit...
Click Add and enter the Sharepoint app pool user acct and click Ok
Make sure Local Launch and Local Activation is selected for this user and click Ok

Once this is all done then log into the Sharepoint admin site and create a new web application and then create a new site collection.
In this example for Sharepoint Web Application has the url:

http://localhost:1010

and the site collections url is:

http://localhost:1010/Sites/SampleSite


Note: The .NET 3.5 Framework, Web Extensions and Silverlight assemblies are all installed during Steps 2, 3 and 4, and these are the setup procedures for a dev VS 2008 machine.
For a production Sharepoint server install you won't be installing VS 2008 and so you will need to install .NET 3.5 Framework SP1 and the Silverlight SDK on the Sharepoint server manually.
The Silverlight SDK can be downloaded from here: http://www.microsoft.com/downloads/details.aspx?FamilyID=8D933343-038F-499C-986C-C3C7E87A60B3&displaylang=en
After the SDK has been installed make sure the System.Web.Silverlight.dll assembly has been registered in the GAC.

[Wokawidget]

If you don't have Visual Studio 2008 then you can download the Visual Web Developer 2008 Express Edition for free from the following url:

http://www.microsoft.com/eXPress/download/

You will then need to install Visual Studio 2008 and Framework 3.5 SP 1. This can be downloaded from the following url:

http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

[Wokawidget]

You can download Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12) from the following url:

http://www.microsoft.com/downloads/details.aspx?familyid=7BF65B28-06E2-4E87-9BAD-086E32185E68&displaylang=en

[Wokawidget]

The Silverlight Tools 2.0 for Visual Studio 2008 can be downloaded from the following url:

http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

[Wokawidget]

The Sharepoint SampleSite Web.Config file can be located at:

c:\inetpub\wwwroot\wss\VirtualDirectories\1010\Web.Config

This needs to be changed to include the following additions.
I have also attached the full web.config to this post.

Add the following to the <configuration><configSections> xml:

<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" />
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
<section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>

Add the following to the <configuration><Sharepoint><SafeControls> xml:

<SafeControl Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" />
<SafeControl Assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.SilverlightControls" TypeName="*" Safe="True" />

Add the following to the <configuration><system.web><httpHandlers> xml:

<remove verb="*" path="*.asmx" />
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false" />

Add the following to the <configuration><system.web><compilation><assemblies> xml:

<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
<add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
<add assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Add the following to the <configuration><system.web><pages> xml:

<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</controls>

Add the following to the <configuration><runtime><assemblyBinding> xml:

<dependentAssembly>
<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" />
</dependentAssembly>

Add the following to the <configuration> xml:

<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules>
<remove name="ScriptModule" />
<add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<remove name="ScriptHandlerFactory" />
<remove name="ScriptHandlerFactoryAppServices" />
<remove name="ScriptResource" />
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</handlers>
<security>
<authorization>
<add accessType="Allow" users="" />
<add accessType="Allow" users="?" />
</authorization>
</security>
</system.webServer>

[Wokawidget]

To add the Silverlight XAP to the IIS MIME-Type complete the following steps:

Open IIS
Open up the properties for the IIS Web Server
Click MIME Types...
Click New...
Enter ".xap" for the Extension
Enter "application/x-silverlight-app" for the MIME type
Click Ok, Ok, Apply

This can also be done on the Sharepoint SampleSite web site on port 1010. The MIME types button is located under the HTTP Headers tab on the site property page..

[Wokawidget]

All the cofiguration has now been completed and we are now ready to get down to business with actually creating our VB.NET Silverlight project.


Open up VS 2008 and create a new Silverlight Application project from the Visual Studio templates. Call this project SilverlightWebPart.VBNETExample.SilverlightControls and set the option to create a sample test page.
Add a new folder called Images and add your VBF avatar image, or any other image, to this folder.
Delete the Page.xaml.
Add a new Silverlight Control to the project called AvatarDisplay
Modify the code of the files to match the examples shown below:

AvatarDisplay.xaml

<UserControl x:Class="SilverlightWebPart.VBNETExample.SilverlightControls.AvatarDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Width="200" Height="200">
<Canvas.Resources>
<Storyboard x:Name="AvatarFadeIn">
<DoubleAnimation Storyboard.TargetName="pnlHolder" Storyboard.TargetProperty="Opacity" From="0.2" To="1.0" Duration="0:0:2" />
</Storyboard>
<Storyboard x:Name="AvatarFadeOut">
<DoubleAnimation Storyboard.TargetName="pnlHolder" Storyboard.TargetProperty="Opacity" From="1.0" To="0.2" Duration="0:0:2" />
</Storyboard>
</Canvas.Resources>
<StackPanel x:Name="pnlHolder" Canvas.Left="75" Canvas.Top="70" Opacity="0.2">
<Image x:Name="imgAvatar" Source="Images/Avatar.jpg" MouseEnter="imgAvatar_MouseEnter" MouseLeave="imgAvatar_MouseLeave" />
<TextBlock x:Name="txtWoof" Text="WooF!" HorizontalAlignment="Center" />
</StackPanel>
</Canvas>
</Grid>
</UserControl>

AvatarDisplay.xaml.vb

Option Explicit On
Option Strict On

Partial Public Class AvatarDisplay
Inherits UserControl

Public Sub New()
InitializeComponent()
End Sub

Private Sub imgAvatar_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
Me.BeginFadeInAnnimation()
End Sub

Private Sub imgAvatar_MouseLeave(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
Me.BeginFadeOutAnnimation()
End Sub

Private Sub BeginFadeInAnnimation()
If Not (Me.AvatarFadeOut.GetCurrentState = ClockState.Stopped) Then
Me.AvatarFadeOut.Stop()
End If
Me.AvatarFadeIn.Begin()
End Sub

Private Sub BeginFadeOutAnnimation()
If Not (Me.AvatarFadeIn.GetCurrentState = ClockState.Stopped) Then
Me.AvatarFadeIn.Stop()
End If
Me.AvatarFadeOut.Begin()
End Sub
End Class

After you have made these code changes you can run the project. As you can see from the screenshots this is an extremely simple Silverlight control that merely fades the image and text in and out when the mouse enters and leaves the control.

[Wokawidget]

Now the easy bit. We must create a web part that can host a Silverlight control. Complete the following steps to create a generic Silverlight WebPart:

Add a new Web Part project called SilverlightWebPart.VBNETExample.WebParts to the solution.
Delete WebPart1
Add a new Sharepoint Web Part item to the project called SilverlightControlPanel
Open the SilverlightWebPart.VBNETExample.WebParts project properties
On the Application tab remove the Root Namespace and leave as empty string
On the Debug tab set the Start Action to start the browser with the Url: http://localhost:1010/Sites/SampleSite
Add the System.Web.Extensions and the System.Web.Silverlight namespaces to the project references
Modify the code for the files shown below:

SilverlightControlPanel.webpart:

<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<!--
The following Guid is used as a reference to the web part class,
and it will be automatically replaced with actual type name at deployment time.
-->
<type name="11dc4485-b887-47cc-aef8-06431b78aabc" />
<importErrorMessage>Cannot import Silverlight Control Panel Web Part.</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">Silverlight Control Panel</property>
<property name="Description" type="string">A general web part that hosts a Silverlight control</property>
</properties>
</data>
</webPart>
</webParts>

SilverlightControlPanel.vb

Option Explicit On
Option Strict On

Imports System
Imports System.Runtime.InteropServices
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Xml.Serialization

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports Microsoft.SharePoint.WebPartPages

Imports System.Web.UI.SilverlightControls
Imports System.ComponentModel

Namespace SilverlightWebPart.VBNETExample.WebParts

<Guid("11dc4485-b887-47cc-aef8-06431b78aabc")> _
Public Class SilverlightControlPanel
Inherits System.Web.UI.WebControls.WebParts.WebPart

Private _silverlightControlID As String = String.Empty
Private _silverlightControlXAPSourcePath As String = String.Empty

Public Sub New()
End Sub

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
MyBase.OnLoad(e)
Me.AddScriptManager()
End Sub

Protected Overrides Sub CreateChildControls()
MyBase.CreateChildControls()
Me.AddSilverlightControl()
End Sub

<WebBrowsable(True), _
Personalizable(PersonalizationScope.User), _
WebDescription("Unique ID for the Silverlight control."), _
Category("Silverlight Control Properties"), _
WebDisplayName("Control ID")> _
Public Property SilverlightControlID() As String
Get
Return Me._silverlightControlID
End Get
Set(ByVal value As String)
Me._silverlightControlID = value
End Set
End Property

<WebBrowsable(True), _
Personalizable(PersonalizationScope.User), _
WebDescription("Location of the Silverlight XAP Package."), _
Category("Silverlight Control Properties"), _
WebDisplayName("XAP Source Location")> _
Public Property SilverlightControlXAPSourcePath() As String
Get
Return Me._silverlightControlXAPSourcePath
End Get
Set(ByVal value As String)
Me._silverlightControlXAPSourcePath = value
End Set
End Property

Private Sub AddScriptManager()
Dim scriptMgr As ScriptManager = ScriptManager.GetCurrent(Me.Page)
If (scriptMgr Is Nothing) Then
scriptMgr = New ScriptManager
Me.Controls.AddAt(0, scriptMgr)
End If
End Sub

Private Sub AddSilverlightControl()
Dim silverlightControl As New Silverlight
silverlightControl.ID = Me._silverlightControlID
silverlightControl.Source = Me._silverlightControlXAPSourcePath
silverlightControl.MinimumVersion = "2.0.5.0"
Me.Controls.Add(silverlightControl)
End Sub
End Class
End Namespace

The properties SilverlightControlID and SilverlightControlXAPSourcePath properties will show up in Sharepoint under the category "Silverlight Control Properties" when we customize our web part in the next step.

The AddScriptManager sub adds a ScriptManager object to the page if one has not already been added.
The AddSilverlightControl method adds a Silverlight object to the WebPart. This Silverlight object is used as a space holder for the actual Silverlight control. The path to the Silverlight control is set by the SilverlightControlXAPSourcePath property.
if you right click the SilverlightWebPart.VBNETExample.WebParts project and click deploy Visual Studio will automatically copy the WebPart output assembly to the GAC and will also register the assembly in the <SafeControls> section of the Sharepoint sites web.config file.

[Wokawidget]

For the Silverlight control to be used by a WebPart the Silverlight project output must be copied to a path that is under the root of the Sharepoint site.

Browse to C:\inetpub\wwwroot\wss\VirtualDirectories\1010\
Create a folder called ClientBin and then a folder called SilverlightWebPart.VBNETExample
Browse to the output folder for the Silverlight project SilverlightWebPart.VBNETExample.SilverlightControls\Bin\Debug, select all files and click copy.
Paste these files into the folder C:\inetpub\wwwroot\wss\VirtualDirectories\1010\ClientBin\SilverlightWebPart.VBNETExample.Silverlight Controls

This does not have to be a manual process. Post build actions can be setup to automatically copy the files to the correct WSS ClientBin folder.

[Wokawidget]

Finally, we are almost done. All that needs doing now is the configuration of the new WebPart in Sharepoint.
Complete the following steps to finalize our WebPart configuration:

Open the Sharepoint site http://localhost:1010/Sites/SampleSite
In the top right of the page click Site Actions, and then click Edit Site
Select the position for where the new WebPart should be inserted and click the Add WebPart button
Browse down the list of installed WebParts and select the SilverlightControlPanel
Now that this WebPart has been added to the page click the Edit button on the WebPart and select Modify Shared WebPart.
In the properties window that is displayed scroll down to and expand the "Silverlight Control Properties".
Enter a control ID of "AvatarDisplay1"
Enter the relative path to the Silverlight control XAP file, in this case it's "/ClinetBin/SilverlightWebPart.VBNETExample/SilverlightWebPart.VBNETExample.SilverlightControls.xap"
Click OK on the properties pane
Click Exit Edit Mode.

[Wokawidget]

After editting the WebPart properties we can view the Sharepoint site in normal mode, and we can clearly see the new Silverlight enabled WebPart.
To test simply move the mouse over the avatar and if all is working it should fade into focus, then fade out when the mouse moves away.

Now open your CV and add "Silverlight enabled WebParts" to your list of skills :D

WOOOOF

[ac931274]

Great write up.

However should people not want to install all of the software, Microsoft has produced a time limited Virtual PC that has everything that you need to develop Webparts (Server 2008, VS 2008, WSS 3.0, etc) already installed.

The link is http://www.microsoft.com/downloads/details.aspx?FamilyID=1beeac6f-2ea1-4769-9948-74a74bd604fa&DisplayLang=en "Windows SharePoint Services 3.0 SP1 Developer Evaluation VPC Image".

Hope that this is of use.:)