如何在 ASP.NET Grid 中使用 Silverlight 控件

引言

在本文中，我将演示如何在 DataGrid、GridView 或任何类型的 ASP.NET 数据呈现控件中使用 Silverlight 控件。 本文并非关于如何编写 Silverlight 应用程序或控件。 这个问题将在另一天讨论。

如果您熟悉 DataGrid 或 GridView 控件的使用，那么您就知道它允许您通过使用 TemplateField 和 ItemTemplate 自定义任何列的视图，以插入任何 ASP.NET 控件或任何 HTML 控件，或者任何类型的标记。 您将使用相同的方法来添加 Silverlight 应用程序或控件。 页面中的以下标记显示了如何执行此操作。

<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>

必备组件

• 您有一个 Silverlight 控件/应用程序，您想要插入，并且它已复制到控件的 Source 属性中设置的位置。
• 对于开发，您需要在您的机器上安装 Silverlight 开发工具。

如何操作？

我将描述您需要在 ASP.NET 页面中使用 Silverlight 控件的步骤。

• 在您的 GridView 或 DataGrid 中插入 TemplateField。
• 在您使用 Silverlight 控件的页面上声明以下页面属性。 如果您不这样做，您将收到错误 解析器错误消息：未知服务器标记 'asp:Silverlight'。

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

• 现在您最大的问题是，所有控件都绑定到绑定到 GridView 或 DataField 的数据项。 Silverlight 控件将如何获取要操作的数据？ 实际上，您无法直接做到这一点。 这就是 Silverlight 控件的 InitParams 属性发挥作用的地方。 您可以在我的博文 Silverlight InitParms 用法 中阅读更多内容。 我强烈建议阅读它，因为它讨论了您需要的一些技巧。 回到将 Silverlight 控件绑定到数据。 在我的示例项目中，我将一个 GridView 放在一起以显示来自博客数据库的 Posts 表中的数据。 只是为了演示，我决定在最后一列中插入 Silverlight 控件，并且此 Silverlight 控件仅显示有关每一行的更多详细信息。 您可以执行以下操作，为 GridView 的 RowDataBound 事件添加事件处理程序。 在事件处理程序中，访问 Silverlight 控件，然后提供您需要传递给控件的所有数据。 请参阅示例项目中的以下代码片段。

  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);
  		}
  	}
  }

  您希望在 InitParams 中传递什么样的数据取决于您自己。 我本可以传递记录的 ID 到 Silverlight 控件，然后让它使用数据服务获取该记录的更多数据。 这完全取决于您的应用程序的需求。 您需要在您的源文件中添加以下 using 语句。 否则，您将收到编译时错误。

  using System.Web.UI.SilverlightControls; 

• 现在您需要在您的 Silverlight 控件中添加实现以使用在 InitParams 中传递给它的数据。 请参阅以下代码，该代码显示了我在示例项目中如何执行此操作。

  private void Application_Startup(object sender, StartupEventArgs e)
  {
  	Post post = new Post(e.InitParams);
  	this.RootVisual = new Page(post);
  }
  
  internal Post(IDictionary 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);
  }

TemplateField 列的大小

如果您没有为该列指定任何固定的高度和宽度，您会注意到您的 Silverlight 控件将不会显示，但会有一个空白空间或非常小的显示，具体取决于您如何配置 GridView。 如果您让 GridView 或 DataGrid 自动调整到列中呈现的数据的大小，那么您拥有 Silverlight 控件的列的大小将等于其他列的列高的最大值，而宽度将仅为几像素。 问题是 Silverlight 控件从宿主获取它们的大小。 它们不会强制宿主使用该大小。 好吧，有一种方法可以做到这一点，但在这里我不会讨论它。 我将在另一篇文章中讨论它。 因此，目前，让我们为 TemplateField 列提供固定的高度和宽度，您的 Silverlight 控件将采用这些尺寸。 您会注意到的另一件事是，包含 Silverlight 控件的列不会与其他非 Silverlight 控件一起正确呈现。 Silverlight 控件将需要一些时间，具体取决于下载和呈现该控件所需的时间。 因此，在您的控件中拥有某种加载启动画面非常重要，以便您的用户知道他们没有在那个列中看到空白空间，而不是没有原因。

历史

• 2009 年 2 月 10 日：初始帖子