# VBForums UtilityBank > UtilityBank - Tutorials >  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.0Install VS 2008 and VS 2008 SP 1Install Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12)Install Silverlight Tools 2.0 for Visual Studio 2008Modify the Sharepoint Web.Config to include Web Extensions and Silverlight assembliesAdd the XAP MIME-Type to IISCreate a sample Silverlight controlCreate a sample WebPart controlCopy the output from the Silverlight project to the Sharepoint serverConfigure the WebPart in SharepointTest
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/d...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 propertiesClick 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 OkMake 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/d...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/d...displaylang=en

----------


## Wokawidget

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

http://www.microsoft.com/downloads/d...displaylang=en

----------


## Wokawidget

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

http://www.microsoft.com/downloads/d...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 IISOpen up the properties for the IIS Web ServerClick MIME Types...Click New...Enter ".xap" for the ExtensionEnter "application/x-silverlight-app" for the MIME typeClick 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 AvatarDisplayModify 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 WebPart1Add a new Sharepoint Web Part item to the project called SilverlightControlPanelOpen the SilverlightWebPart.VBNETExample.WebParts project propertiesOn the Application tab remove the Root Namespace and leave as empty stringOn the Debug tab set the Start Action to start the browser with the Url: http://localhost:1010/Sites/SampleSiteAdd the System.Web.Extensions and the System.Web.Silverlight namespaces to the project referencesModify 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.VBNETExampleBrowse 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/SampleSiteIn the top right of the page click Site Actions, and then click Edit SiteSelect the position for where the new WebPart should be inserted and click the Add WebPart buttonBrowse down the list of installed WebParts and select the SilverlightControlPanelNow 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 paneClick 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  :Big Grin: 

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/d...DisplayLang=en "Windows SharePoint Services 3.0 SP1 Developer Evaluation VPC Image".

Hope that this is of use. :Smilie:

----------

