Silverlight Enabled WebPart Tutorial
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.
Step 2 - Install Visual Studio 2008 and SP1
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
Step 3 - Install Visual Studio 2008 extensions for Windows Sharepoint Services
You can download Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12) from the following url:
http://www.microsoft.com/downloads/d...displaylang=en
Step 4 - Install Silverlight Tools 2.0 for Visual Studio 2008
The Silverlight Tools 2.0 for Visual Studio 2008 can be downloaded from the following url:
http://www.microsoft.com/downloads/d...displaylang=en
1 Attachment(s)
Step 5 - Modify the Sharepoint Web.Config to include Web Extensions
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:
Code:
<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:
Code:
<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:
Code:
<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:
Code:
<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:
Code:
<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:
Code:
<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:
Code:
<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>
1 Attachment(s)
Step 6 - Add the XAP MIME-Type to IIS
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..
2 Attachment(s)
Step 7 - Create a sample Silverlight control
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
Code:
<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
Code:
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.
Step 8 - Create a sample WebPart control
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:
Code:
<?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
Code:
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.
1 Attachment(s)
Step 9 - Copy the output from the Silverlight project to the Sharepoint server
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.
2 Attachment(s)
Step 10 - Configure the WebPart in Sharepoint
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.
Re: Silverlight Enabled WebPart Tutorial
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.:)