Embedding Silverlight into a WebPart

12Oct10

A current project required me to drop a Silverlight control into a WebPart for inclusion in a Microsoft SharePoint site. In the past, I think that the Silverlight component could be created programmatically like any other ASP.NET control, but if I understand correctly, this support has been dropped from the latest version of Silverlight (4.0 as of this writing).

As you may know, WebParts do not natively support the use of the ASP.NET templating engine in order to assist with rendering its contents. That is, we can’t create a corresponding markup file as we do with .aspx or .ascx components. We can work around this by using LoadControl() in order to render a user control (.ascx file) within the body of the WebPart’s CreateChildControls() method, but I wanted to see if I could avoid having to create a separate user control just for embedding my Silverlight component.

I found two currently supported approaches to adding Silverlight content to a page in version 4: using an object tag or client-side using Javascript. Since I wasn’t doing much else with Javascript on the client, I wanted to stick to a server-side solution. My attempts at programmatically creating the Silverlight control as outlilned here failed, so what I ended up doing was to embed the object tag into an HtmlGenericControl directly in the WebPart. Here is the code:

	public class SilverlightPart : WebPart
	{
		protected override void CreateChildControls() {
			this.Title = "Embedded Silverlight";
			HtmlGenericControl control = new HtmlGenericControl( "div" );
			control.InnerHtml = @"<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='300px'>
				<param name='source' value='ClientBin/SilverlightWizard.xap'/>
				<param name='onError' value='onSilverlightError' />
				<param name='background' value='white' />
				<param name='minRuntimeVersion' value='4.0.50401.0' />
				<param name='autoUpgrade' value='true' />
				<a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0' style='text-decoration:none'>
 					<img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style:none'/>
				</a>
			</object>";
			Controls.Add( control );
			ChildControlsCreated = true;
		}
	}

One small thing to note is that we need to specify a height for the Silverlight control when it appears in a WebPart zone. Setting width to 100% is fine, but setting the height must be done using a specific height due to the layout logic used by the zones.

Advertisements


No Responses Yet to “Embedding Silverlight into a WebPart”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: