How To Use Silverlight Controls in ASP.NET Grid

Introduction

In this article, I will demonstrate how you can use a Silverlight control in DataGrid, GridView or for that matter in any kind of data presentation control in ASP.NET. This article is not about how to write a Silverlight application or control. That will be discussion for another day.

If you are familiar with the use of DataGrid or GridView controls, then you know that it allows you to customize view of any column by using TemplateField and ItemTemplate to insert any ASP.NET control or any HTML control or for that matter any type of mark up. Well you will do the same to add a Silverlight application or control. The following mark up from page shows how you can do it.

<Columns>
	<asp:TemplateField>
	<ItemStyle Height="120" Width="200" />
	<ItemTemplate>
		<asp:Silverlight ID="postDetailsSL" 
			runat="server" Source="~/ClientBin/SilverDataView.xap" 
			MinimumVersion="2.0.31005.0" 
			Width="100%" Height="100%" />
	</ItemTemplate>
	</asp:TemplateField>
</Columns>

Prerequisites

• You have a Silverlight control/application that you want to insert and is copied at location that is set in Source property of control.
• For development, you will need to have Silverlight development tools on your machine.

How To?

I will describe steps that you will need to follow to use a Silverlight control in your ASP.NET pages.

• Insert TemplateField in your GridView or DataGrid.
• Declare the following page attribute on page where you are using Silverlight control. If you do not do it, you will get error Parser Error Message: Unknown server tag 'asp:Silverlight'.
  ASP.NET

  <%@ Register Assembly="System.Web.Silverlight" 
  	Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

• Now the biggest question you have is, all controls are bound to data items bound to GridView or DataField. How will Silverlight control get the data on which to operate. Well there is no direct way for you to do it. This is where InitParams property of Silverlight control comes into play. You can read more about it in my blog post Silverlight InitParms Usage. I will strongly recommend reading it because it talks about some tricks that you will need. Back to binding Silverlight control to data. In my example project, I put together a GridView to display data from Posts table of blog database. Just for demonstration, I decided to insert Silverlight control in the last column and this Silverlight control just displays some more details about each row. Here is what you can do, add event handler for RowDataBound event for GridView. In the event handler, access the Silverlight control and then supply all the data that you need to pass to the control. See the following code snippet from the sample project.
  C#

  protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
  {
  	if (e.Row.RowType == DataControlRowType.DataRow)
  	{
  		DataRowView drv = e.Row.DataItem as DataRowView;
  		Silverlight sl =  e.Row.FindControl("postDetailsSL") 
  							as Silverlight;
  		if (null != sl)
  		{
  			string fmt = "postID={0},
  				dateCreated={1},dateModified={2},
  				rating={3},views={4}";
  			string slParams = 
  			  string.Format(fmt, drv["PostID"], 
  			                drv["DateCreated"], 
  			                drv["DateModified"], 
  			                drv["Rating"],
  			                drv["Views"]);
  			sl.InitParameters = string.Format(slParams);
  		}
  	}
  }

  It is up to you what kind of data you want to pass in InitParams. I could have passed ID of the record to Silverlight control and then let it use for data service to get more data for that record. It's all up to the requirements of your application. You will need to add the following using statement in your source file. Otherwise, you will get compile time errors.

  C#

  using System.Web.UI.SilverlightControls; 

• Now you will need to add the implementation in your Silverlight control to consume the data that was passed to it in InitParams. See the following code showing how I did it in the example project.

  C#

  private void Application_Startup(object sender, StartupEventArgs e)
  {
  	Post post = new Post(e.InitParams);
  	this.RootVisual = new Page(post);
  }
  
  internal Post(IDictionary<string,string /> parameters)
  {
  	_postId = parameters["postID"].ToString();
  	_createDate = DateTime.Parse(parameters["dateCreated"].ToString());
  	_modifiedDate = DateTime.Parse(parameters["dateModified"].ToString());
  	int.TryParse(parameters["views"].ToString(), out _views);
  	double.TryParse(parameters["rating"].ToString(), out _rating);
  }

Size of TemplateField Column

If you do not specify any fixed height and width for the column, you will notice that your Silverlight control will not show up, but there will be empty space or very small display depending on how you configured your GridView. If you let GridView or DataGrid auto adjust to the size of rendered data in the columns, then the size of column where you have Silverlight control will be equal to maximum of height of column for other columns and width will be only a few pixels. The problem is that Silverlight controls take their size from the host. They do not force the size on host. Well, there is a way to do it but I will not discuss it here. I will write about it in another article. So for now, let's supply fixed height and width for TemplateField column and your Silverlight control will take those dimensions. The other thing you will notice is that the column containing Silverlight control will not render right along with other non-Silverlight controls. Silverlight control will take some time depending on the time it takes to download the control and render. So it is very important that you have some kind of loading splash screen in your control so that your users know that they are not seeing empty space in that column for no reason.

History

• 10^th February, 2009: Initial post