13.7.3 Silverlight位于HTML之上 

　　前面示例中，虽然我们使用无窗口模式实现了混合Silverlight和HTML，但是可以看到Silverlight应用程序的位置相对比较固定，如何实现让Silverlight程序动态的出现在HTML中呢？来看一个示例，编写一个简单的Silverlight界面，如下面的示例代码所示：

　　XAML<Grid x:Name=”LayoutRoot”><RectangleStroke=”#FF6600″StrokeThickness=”2″RadiusX=”5″RadiusY=”5″Fill=”#FFEDE1″/><TextBlockHorizontalAlignment=”Center”Text=”此处是Silverlight!”/></Grid>

　　在Silverlight测试页中定义几个样式，如下面的示例代码所示：

　　CSS<styletype=”text/css”>.containerposition:relative;.slPluginposition:absolute;top: 0px;center: 0px;width:0px;border=”1″ Height:0px;.targetbackground-color: #FFFF00;font-size:large;font-weight:bold;</style>

　　编写测试页，放置一个”span”作为我们的目标元素，并对其他元素使用相关的样式，如下面的示例代码所示：

　　<div class=”container”>……<spanid=”target”class=”target”>Silverlight</span>……<divclass=”slPlugin”id=”slPluginHost”><asp:SilverlightID=”Xaml1″runat=”server”Source=”~/ClientBin/Chapter13.SilverlightOverHTML.xap”MinimumVersion=”2.0.31005.0″ Width=”100%”border=”1″Height=”100%”/></div></div>

　　现在在Grid控件的Loaded事件中编写代码，首先获取目标元素及放置Silverlight插件的元素，并为目标元素附加onclick事件，如下面的示例代码所示：

　　实现OnClickTarget事件，获取目标元素的相对位置及它的宽度和高度，重新设置Silverlight程序所在元素的位置，如下面的示例代码所示：

　　void OnClickTarget(t sender, HtmlEventArgs e)double targetcenter=Convert.ToDouble(target.GetProperty(”offsetcenter”));doubletargetTop=Convert.ToDouble(target.GetProperty(”offsetTop”));doubletarget Width=Convert.ToDouble(target.GetProperty(”offsetWidth”));doubletargetborder=”1″Height =Convert.ToDouble(target.GetProperty(”offsetborder=”1″Height”));doubleplugIncenter = targetcenter + 20;double plugInTop =targetTop +20;double plugInWidth = targetWidth + 40;doubleplugInborder=”1″ Height =targetborder=”1″ Height + 40;

　　plugInHostDiv.SetStyleAttribute(”center”, plugIncenter.ToString()+”px”);plugInHostDiv.SetStyleAttribute(”top”, plugInTop.ToString()+”px”);plugInHostDiv.SetStyleAttribute(”width”,plugInWidth.ToString()+”px”);plugInHostDiv.SetStyleAttribute(”border=”1″Height”,plugInborder=”1″ Height.ToString() + “px”);

　　运行后起始效果如图13-21所示。

（点击查看大图）图13-21

　　当鼠标放在目标元素（即图中的”Silerlight”文本）之上时，效果如图13-22所示。

（点击查看大图）图13-22

　　可以看到，Silverlight应用程序成功显示在HTML之上。