最近做SonySource项目时实现了几个很小的Silverlight程序，分别是Clock、HomePeoplePicker和ManageMentPeoplePicker。实际上这三个silverlight程序都非常简单，主要特点有以下几个方面：

　　1. Silverlight程序和页面上的HTML元素混合在一起，且在特定事件触发后要动态改变Silverlight程序在页面中占的位置及大小，但给用户的感觉是无缝连接；
　　2. Javascript和Silverlight相互调用；
　　3. 简单的探照灯遮照效果；

      下面就分别对我认为比较不好处理的地方或者一些我费了很多周折才实现的地方做一简要说明：

　　一、使Silverlight浮动在Html元素中，并动态改变大小

　　或许我这个小标题描述得还不是很准确，不能直观表达我的意思。举个例子，假设我们要用Silverlight做个下拉菜单，并将他放在html页面上使用。我们希望这个silverlight菜单所占的大小只是980px宽和30px高，因为在紧挨菜单的上面和下面的地方我们要放置一起其他的html元素。但当用户点击某个菜单项时，这个子菜单就展开，假设子菜单的大小是100px款和200px高，那就要求Siverlight所占的位置至少高为230px。由于Silverlight菜单只有30px高，所以下拉菜单就被截断而不能完整显示。我做的这个项目里三个Silverlight都遇到类似问题。例如PeoplePicker是在一个表格框里显示很多人的图像，当用户点击一个人的图像的时候弹出一个窗口以显示人的详细信息，在某种情况下，这个弹出窗口会超出包含所有人物图像的表格从而部分被截断。在《Silverlight嵌入到HTML之windowless属性及运用AjaxControlToolKit时出现虚线边框的问题》所描述的问题就是基于这种需求。

　　上述问题是否可以简单的描述为：Silverlight程序在页面上只在指定的Silverlight plug in（<object/>元素）中显示，当超过Silverlight Plug in时就会被截除；当Silverlight程序的宽和高在运行时不确定时，就要求Silverlight Plug in的大小和位置随之改变以使所有silverlight内容都能完整正确的显示出来。

      我在这个项目里的解决办法就是基于以上的描述，动态改变Silverlight plug in（object元素）的大小，并时silverlight plug in以绝对定位的方式浮动于其他元素之上，且让silverlight plug in的背景色为透明以不至于让他遮盖所有的底层元素。

　　首先，我们在页面上定义一个<div>元素，我们的silverlight程序就放在这个<div>里，并以它作为silverlight的定位基准。即正常情况下silverlight和包含它的<div>的位置和大小完全一致。当需要改变silverlight的大小和位置时，也以该<div>为参考。在页面布局时，我们只用关注这个<div>应该放到哪就行了。HTML代码大致如下：

NET技术：简单探照灯遮照效果的Silverlight程序，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。