| function createControlPanel(){Silverlight.createObjectEx({source: "controlPanel.xaml",parentElement: document.getElementById("dotControlPanel"),id: "slControlPanel",properties: {width: "100%",height: "100%",inplaceInstallPrompt:true,version: "1.0"}});}if (!window.Silverlight) window.Silverlight = {};Silverlight.createDelegate = function(instance, method) {return function() {return method.apply(instance, arguments);}} 仔细研究一下清单2，你会发现一些有趣的事情：
● createSilverlight.js是示例代码的标准文件名，同通常也保留了创建Silverlight的功能，但正如你在这里所看到的，名字完全由你自己定。
● 注意其中的Silverlight.createObjectEx调用，它的源是一个XAML文件，也就是你刚刚创建的那个文件，但实际上那个源可以是任何能够返回XAML代码的文件，包括编译后的二进制文件或PHP脚本文件。
● parentElement指定了显示结果要用到的DOM对象。
● id就是这个Silverlight控件的ID，如果创建了多个控件，确保它是唯一的。
● 特别要注意properties属性，你可以指定真实的尺寸规格，也可以象我这里这样使用100%，但你必须要小心inplaceInstallPrompt和version的值。在前面引用的那篇MSDN文章（http://www.devx.com/RIA/Link/36025）对安装提示做了详细说明。这里的版本号，由于之前早就定了要使用Silverlight 1.0运行时程序库，所以这里就指定为1.0。但你在开发.NET应用程序时，如果使用了新版本的某些功能，那么请在这里指定为2.0.
为了将它们集成到一起，创建一个测试页PHPdemo.htm，它的内容如下。
清单3： PHPdemo.htm
| ＜html＞ ＜head＞ ＜title＞Silverlight PHP Demo＜/title＞＜script type="text/javascript" src="Silverlight.js"＞＜/script＞＜script type="text/javascript" src="createSilverlight.js"＞＜/script＞＜style type="text/css"＞.controlPanel {height: 80px;width: 640px;}.XAMLCanvas {height: 480px;width: 640px;}＜/style＞ ＜/head＞ ＜body＞＜div＞＜script type="text/javascript"＞createControlPanel();＜/script＞＜/div＞＜div＞＜/div＞ ＜/body＞＜/html＞ 没有什么好解释的，这里引入了两个外部JavaScript文件，通过css设置了一些尺寸规格，然后添加了两个div，一个用于控制面板，一个用于显示结果，在div里面，调用了一个JavaScript函数，实例化Silverlight对象。
在Web浏览器中运行这个页面，你应该会看到某些Silverlight发生作用了，如图2所示。
第2步：添加XAML鼠标事件
主体工作完成后，我们接下来要做的才是真正有趣的事情，接下来的几步将分块进行，最后逐个构建，因此你必须确保一切正常，在这一步中，我们往清单1的代码中加入鼠标事件XAML代码。
Silverlight支持多种事件，你可以将其引入到XAML中，在这个JavaScript示例中，通过代码进行处理，对于这个demo，你可能最想加入的是鼠标事件：MouseLeftButtonUp，尽管其他鼠标事件如MouseMove、MouseEnter等也一样可以应用到这里，这些事件在Silverlight鼠标支持更多的描述。
回到清单1 XAML控制面板代码中去，在每个ellipse标签的末尾，添加下面的代码：
| MouseLeftButtonUp="dropDots" 然后在createSilverlight.js文件中，添加下面的代码： | function dropDots(sender, mouseEventArgs){alert('dots dropped!');} 刷新一下这个页面，现在你会发现，当你在小圆圈上点击时，会弹出一个对话框
接下来对alert语句稍微做一下改动，如下：
sender.fill = "red";
这就是一个简单的与XAML交互的例子，看起来还是瞒easy的，再重新刷新一下这个页面，在小圆圈上点击时，你会发现它的颜色就变成红色了。
现在再用下面的语句替换到sender.fill：
alert(sender.Fill.Color);
这样返回的就是当前小圆圈颜色的值了。
第3步：将PHP添加为XAML的源
那么PHP该放到那儿呢？正如前面提到的，你可以将其作为Silverlight对象的一个源使用。
将清单4中的代码保存为drawDots.php。
清单4：drawDots.php
＜?header('Content-type: text/xml');?＞＜Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design"＞＜Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0"＞＜Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFF0000"/＞＜Ellipse x:Name="Ellipse_0" Width="71" Height="71" Canvas.Left="192.86" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFF00"/＞＜Ellipse x:Name="Ellipse_1" Width="71" Height="71" Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/＞＜Ellipse x:Name="Ellipse_2" Width="71" Height="71" Canvas.Left="379.553" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF230FD2"/＞＜Ellipse x:Name="Ellipse_3" Width="71" Height="71" Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/＞＜/Canvas＞＜/Canvas＞ | | | | |
