silverlight控件与HTML控件交互

silverlight控件与HTML控件交互

1、在您的ASP.net网站添加silverlight特性。

    通常情况下，我们很少有用纯粹的Silverlight项目做客户端UI的，虽然Silverlight完全能胜任，我们也建议这样做。一般情况是这样的，我们有一个ASP.net的网站，想利用silverlight的强大功能来丰富UI的表现力，这样就提出了Silverlight与ASP.net网站整合的问题。由于Silverlight在网页里表现为一个controler，并且依附在一个div里，所以把silverlight与现有的Default.aspx网页整合是非常容易的。

    第一步：使用VS2008新建一个ASP.net网站工程，再在解决方案中新加一个silverlight project命名为SilverlightProject1。

    第二步：鼠标右击ASP.net网站工程，选择“Add Silverlight Link...”，将SilverlightProject1添加到现有网站中。VS2008会自动将TestPage.html、TestPage.html.js、Page.xaml、Silverlight.js几个文件拷贝到ASP.net网站工程中。

    第三步：我们的网页是Defaule.aspx，而不是TestPage.html，如何将Silverlight嵌入Defaule.aspx呢？首先我们打开TestPage.html，复制代码段

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        .silverlightHost { 640px; height: 480px; }
    </style>

粘帖到Defaule.aspx的“head”段里面，然后我们在TestPage.html中复制代码段

    <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>

粘帖到Defaule.aspx的“form”段里面，这样我们就将silverlight元素添加到了Defaule.aspx网页中。

2、混排Silverlight控件和HTML控件

    很多情况下，我们需要在Silverlight控件上显示HTML控件，比如说按钮和文本输入框组成的登录窗口。首先我们打开TestPage.html.js文件，如下所示，添加isWindowless: "true" 属性

 function createSilverlight()
{
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
    "100%",
   height: "100%",
   version: "1.1",
   enableHtmlAccess: "true",
   isWindowless: "true"
  },
  events: {}
 });
   
 // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }

}

然后打开Defaule.aspx（假设silverlight控件在里面），在silverlight控件的宿主div中添加一个div，如下：

   <div style="position: absolute; 100px; height: 100px; z-index: 2; left: 318px; top: 286px"
            id="layer2" class="style3">
   <label id="Label1">Label</label></div>

id="layer2"的div会浮在silverlight上面。再在这个div里面添加html控件即可。