说明：本系列基本上是《WPF揭秘》的读书笔记。在结构安排与文章内容上参照《WPF揭秘》的编排，对内容进行了总结并加入一些个人理解。
这部分内容主要介绍Silverlight与浏览器的交互，包括使用JavaScript来控制Silverlight。这其中起主要作用的是Silverlight插件与Silverlight.js这个文件。
首先我们要展示怎样在浏览器中嵌入Silverlight对象，有两种方式实现这个目的，第一种是使用JavaScript加载Silverlight控件，这涉及到上文提到的一个很重要的文件 – Silverlight.js，其在Silverlight插件与Silverlight内容之间建立起桥梁。
Silverlight文件包含两个初始化Silverlight控件的方法createObject和createObjectEx。它们的区别在于createObjectEx将参数序列化为JSON。
在页面引用了Silverlight.js后，我们就开始调用createObject方法初始化Silverlight。在这之前我们先了解一下createObject方法的参数。
-
Source: 用来设置控件要显示的XAML代码或XAP应用程序，其有如下几种设置方式：
- 文件引用，如source.xap
- 某个div中嵌入式的xaml代码。假如这个div对象名为xmaldiv，则设置source属性为#xamldiv来引用。
- parentElement: 网页中用于包含Silverlight控件的div的id
- ID: Silverlight控件的唯一标识
-
这个属性是一个属性数组，其中包含如下这些属性
- width: Silverlight控件的宽度，接受像素值或百分比
- height: Silverlight控件的高度，接受像素值或百分比
- backgroud: 控件的背景颜色，接受ARGB或颜色名
- framerate: 动画的最大帧率，默认值24
- isWindowless: 布尔值，设置HTML内容是否可以显示到Silverlight上面，默认值为false。
- enableHtmlAccess: 设置Silverlight的内容是否可以访问浏览器的DOM模型，默认值为true。
-
inplaceInstallPrompt：布尔值设置Silverlight的安装模式，true表示直接安装，false为间接安装
- 直接安装：用户无需离开访问的页面，只需接受一个软件许可协议，控件就会被自动下载安装。
- 间接安装：用户被导航到微软网站，在特定的页面中接受协议，下载并安装控件。
- version: Silverlight控件向前兼容的最低版本
-
这个参数是一个事件数组
- onLoad: 控件加载完毕后触发的事件
- onError: 遇到异常时触发的事件
- onFullScreenChange: Silverlight中指示全屏状态的FullScreen改变时触发
- onResize: 当Silverlight的ActualWidth或ActualHeight改变时触发
- initParams：定义加载控件时，传入的用户自定义参数的集合，该参数为字符串类型。这样我们可以把所要传递的参数使用逗号分隔，组成一个字符串传递过去。在接收并使用参数时，可以通过Js的split方法将字符串转化为一个数组以使用。参数的处理一般位于onLoad事件的处理程序，后文有详细介绍。
- userContext: 该参数用于为控件设置一个唯一标识。这个标识主要用于传递给onLoad事件处理函数用以区分同一页面中不同的Silverlight控件。这个参数的行为与initParams相同，所以也可以用它来传递参数，虽然这不是推荐做法。具体使用可见下文代码。
上面介绍了这么多，下面我们通过一段代码演示createObject方法的使用：
Silverlight.createObject(
"Page.xaml",
document.getElementById("SilverlightControlHost"),
"mySilverlightControl",
{
width: '300',
height: '300',
inplaceInstallPrompt: false,
background: '#D6D6D6',
isWindowless: 'false',
framerate: '24',
version: '2.0'
},
{
onError:null,
onLoad:null
},
"p1,p2,p3",
null
);
上面代码中指定的XAML源 – Page.xaml很简单，如下所示：
<UserControl x:Class="SilverlightApplication3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Text="Hello, World!"></TextBlock>
</Grid>
</UserControl>
这样一个最简单的可运行的Silverlight例子就完成了。
下面是实现同样效果的另一种途径 – 使用Object标签。通过<object>标签可以不使用js，直接在页面中以声明方式加载Silverlight控件，同样类似于其它插件的加载，可以使用<param>来设置参数。
使用<object>的一个好处在于，可以在<object>之前放置一段HTML，从而在Silverlight没有正确初始化时在其位置显示这段HTML。如这种情况，在客户端没有Silverlight插件，或版本过低时可以通过这段HTML提供一个下载安装的链接。这种方式可以参考如下的例子：
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication3.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取¨Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
注意：<object>标签中data属性的值:"application/x-silverlight-2"，这是Silverlight的MINE类型。Silverlight插件在加载Silverlight内容时会检查该值，如果是一个不支持的MINE类型，则无法正确加载（这是那段HTML代码就起作用了：））
使用这种方式加载Silverlight控件的另一个好处在于可以在不接受js内容的地方，如第三方博客服务中，加载Silverlight内容。
说完了两种加载Silverlight内容的方式。接下来介绍处理控件加载事件。
我们可以定义一个函数来响应控件的onLoad事件。这个函数应符合如下格式的声明：
Function handleLoad(control, userCotext, rootElement);
这三个参数分别为：
- 控件的引用，我们前文介绍的createObject的initParams函数传递的值就存储于control.initParams属性中。
- 上下文信息，这是createObject方法userContext方法传递的参数。
- XAML根元素的引用
注意：Silverlight中加载顺序
XAML UI元素中定义的任何loaded事件会在Silverlight控件的onLoad事件之前触发。Silverlight有一个布尔类型的只读属性 – IsLoaded。该属性默认值为false，它在Silverlight控件的onLoad事件发生前被设置，通过它可以判断控件是否加载完成。
下面的示例代码，我们分别演示了处理initParams参数，接收userContext。
function handleLoad(control, userContext, rootElement) {
//接收并处理自定义参数
var params = control.initParams.Split(",");
for (var i = 0; i < params.Length; i++) {
alert(params[i]);
}
//接收userContext
alert(userContext);
}
处理异常
当Silverlight遇到错误，如XAML解析器无法完成解析，加载未正确完成时，在createObject()创建Silverlight控件时定义的onError事件处理程序就会被调用。
如果onError参数没有被设置，或设置为null，则默认的错误处理函数会被调用并以alert()的方式给出错误信息。
自定义的onError事件处理函数，我们称其为handleError，接收两个参数 – sender – 表示引发错误的对象，errorArguments - 为错误事件参数。errorArguments为ErrorEventArgs类型，其中有一个errorType属性表明具体的错误类型，可能的值为RuntimeError或ParserError。这两个类型都是ErrorEventArgs的子类，当通过errorType确定具体错误类型后，就可以把errorArgments作为具体子类的对象对待并访问其中特定的属性。
ParserErrorArgs中的一些属性：
- charposition属性，包含了出错字符串的位置信息。
- linenumber属性，包含出错的行号信息
- xamlFile，包含出错文件的信息
- xmlAttribute包含出错的xml属性信息
- xmlElement包含出错元素的信息
RuntimeErrorEventArgs包含的属性：
- charPosition属性，包含了出错字符串的位置信息。
- lineNumber属性，包含出错的行号信息
- methodName包含出错方法的信息
最后我们来看一段handleError函数的代码：
//假定这里遇到一个分析器错误
//如前文所述，当我们无法预先知道错误类型时，需要查询errorType属性
function handleError(sender, errorArguments) {
var strError = "Error Details: \n";
strError += "Type: " + errorArguments.errorType + "\n";
strError += "Message: " + errorArguments.errorMessage + "\n";
strError += "Code: " + errorArguments.errorCode + "\n";
strError += "Xaml File: " + errorArguments.xamlFile + "\n";
strError += "Xaml Element: " + errorArguments.xmlElement + "\n";
strError += "Xaml Attribute: " + errorArguments.xmlAttribute + "\n";
strError += "Line: " + errorArguments.lineNumber + "\n";
strError += "Position: " + errorArguments.charPosition + "\n";
alert(strError);
}
这个自定义的错误处理函数中，使用自定义的方式展示了Silverlight中发生的错误。
Silverlight控件的属性
接下来这一部分我们介绍Silverlight插件所支持的属性，方法与事件模型。另外也介绍Silverlight控件对载入与错误事件的处理，包括Silverlight提供的默认的错误处理函数以及如何重写这个函数，如何传递自定义参数和上下文信息给Silverlight控件。
控件的属性主要分三类：直接访问类，内容访问类，设置访问类
直接访问类的属性可以使用"Control.Propertyname"的语法直接访问。内容访问类与设置访问类分别使用"control.content.propertyname"与"control.settings.propertyname"的语法访问。
直接访问类属性
- initParams：前文有介绍，只能在初始化Silverlight控件时设置。
- isLoaded：只读布尔属性，表明控件是否加载完
- source：指定要显示的XAML内容源。其设置方式在介绍createObject()方法参数部分有详细介绍
内容访问类
-
actualHeight：返回Silverlight控件区域的高度，以像素为单位。
这个属性的值有几种可能，当初始化时使用绝对值（像素）设置，这个属性的值就与设置值相同，如果初始化时使用百分比设置，这个属性会随着浏览器窗口的改变而改变，当控件在全屏模式下时，它的值与系统桌面的高度相同。
- actualWidth：返回控件实际显示宽度，决定这个属性的因素与actualHeight相同。
- fullScreen：控制Silverlight控件是标准模式还是全屏模式。默认值false即标准模式
设置访问类
- background: 设置Silverlight控件的背景颜色，其接受多种格式，包括颜色名，有或没有alpha值的8位或16位RGB格式。
- enableFrameRateContent: 是否在浏览器状态栏中显示Silverlight当前的帧率，默认值为false。
- enableHtmlAccess: 是否允许XAML内容访问浏览器DOM对象默认值为true。
- enableRedrawRegious: 是否让Silverlight控件在每一帧重画每个区域。默认值为false，当设置为true时有利于提高程序性能。
- maxFrameRate: 设置Silverlight动画的最大帧率，默认值为24，可设最大值为64。
- version: 当前Silverlight插件的版本号。这是一个由逗号分隔的四个数字组成的字符串，四个数字分别表示主版本，次版本，编译号和修订号，其中前两个号是必须的。
- windowsless: 该属性被设置为true时，控件为非窗口模式，Silverlight的内容可以高效率的显示在HTML内容的下面。
Silverlight控件的方法
Silverlight控件拥有一个直接访问类方法和三种内容访问类方法。直接访问方法为createObject，其用来创建实现特定功能的可清除对象。在Silverlight中这样的对象只有Downloader对象（后文会详细这个对象），下面介绍的3个方法是内容访问方法，应使用control.content.methodName()来调用。
-
createFromXmal方法
该方法将定义好的XAML内容动态地加入Silverlight控件中。该方法接收两个参数，第一个是包含要添加XAML内容的字符串，第二个参数指示是否创建命名空间，当为true时，会在引入的XAML中添加一个有唯一值的x:Name属性以与现有XAML元素名称区分。
添加的内容有一个限制，即只能有一个根节点，否则该把这些元素套在一个<Canvas>标签内。
另外CreateFromXaml创建的对象并没有立刻被添加到Silverlight控件中，CreateFromXaml方法返回一个节点的引用，需要手动把该节点的引用加入控件树中。下面的代码给出示例：
function handleLoad(control, userContext, sender) {
var xmalFragment = '<TextBlock Canvas.Top="60" Text="This is Inserted." />';
var textBlock = control.content.createFromXaml(xmalFragment);
sender.children.add(textBlock);
}
-
CreateFromXamlDownloader方法
这个方法结合下文介绍的Downloader对象一起使用。该方法接收两个参数，第一个是用于下载XAML代码的Downloader对象，第二个参数用于指定使用Downloader对象包的哪一部分，如下载的是一个压缩包，该属性就设置为压缩包中XAML代码的文件名，如果下载的不是压缩包，该参数传入空字符串即可。
-
fullName方法
使用该方法通过x:Name查找指定的节点，如果找到则返回该节点的引用，否则返回null。
Downloader对象
接下来，介绍Silverlight中的Downloader对象，包括如何使用Downloader对象动态的向Silverlight程序中添加内容。Downloader对象用于异步下载额外内容，如包括单个资源的文件或多个资源的压缩包。Downloader对象通过JavaScript访问网络资源，Downloader对象只能从Silverlight程序所在的站点上下载内容，如果试图从别的站点上下载文件会抛出异常。
Downloader对象的属性
- downloadProgress: 该属性为0到1间的值，代表当前下载进度，1表示下载完毕。
- status: 该属性提供当前下载进程的HTTP状态值，这是一个标准的HTTP状态。如404表示文件未找到，200表示成功。
- statusText: 该属性表示当前下载状态的文本信息，它与status属性保持一致，对于成功完成的HTTP请求，status值为"200"，StatusText值为"OK"。更多状态码与对应文本可参见W3C对于HTTP协议的描述。
- uri: 要下载的目标对象的地址
Downloader对象的方法
- abort: 该方法用于取消当前下载，并将所有属性设为默认值。
- getResponseText: 该方法返回下载内容字符串形式的结果，该方法有一个可选参数，用来指定需要返回其内容的压缩包中的文件的文件名。
- open: 该方法用于初始化下载，其接受两个参数，第一个是下载的请求方式，目前Silverlight只支持GET方式请求。
- send: 在使用Open方法初始化过的Downloader对象上调用该方法来执行下载请求。
Downloader对象的事件
- completed: 下载完毕时触发该事件。此事件的处理函数接收两个参数。第一个是事件触发者，此处即Downloader对象，第二个是传入事件处理函数的一组参数。
- downloadProgressChanged: 在内容下载过程中触发该事件。如当下载进程达到5%时会触发该事件，当进程达到100%时，在触发此事件的同时会触发completed事件。
下面我们通过代码来看一下Downloader对象的使用方法：
function handleLoad(control, userContext, sender) {
var downloader = control.createObject("downloader");
downloader.addEventListener("downloadProgressChanged", "handleDLProgress");
downloader.addEventListener("completed", "handleDLComplete");
downloader.open("GET", "z.png");
downloader.send();
}
下面的代码是两个事件处理函数的实现，分别用来反馈下载进度与通知下载完成。
function handleDLProgress(sender, args) {
var ctrl = sender.getHost();
var t1 = ctrl.content.findName("label");
var v = sender.downloadProgress * 100;
t1.Text = v + "%";
}
function handleDLComplete(sender, args) {
alert("Download complete");
}
通过JavaScript操作Silverlight界面元素
最后我们来看一下Silverlight界面元素的编程模型，其中包括如何使用JavaScript来使用这些界面元素暴露的方法与事件。
Silverlight界面元素包括Canvas，Image，MediaElement及各类Shape，Path等，它们都为JavaScript的访问暴露了一些方法。下面逐一介绍这些方法：
-
AddEventListener/RemoveEventListener方法：
AddEventListener方法主要用于给界面元素添加一个事件侦听器，而相反RemoveEventListener用来删除一个界面元素与事件的关联。后着通过前者返回的整数值或事件处理程序的名称来完成删除。
下面的代码展示了AddEventListener事件的订阅与事件处理函数的实现：
function handleLoad(control, userContext, sender) {
sender.addEventListener("mouseLeftButtonDown", handleMouse);
}
function handleMouse(sender, mouseEventArgs) {
alert(mouseEventArgs.getPosition(null).x + ":" + mouseEventArgs.getPosition(null).y);
}
-
findName方法
此方法通过搜索XAML树查找指定的对象。如果找到会返回该对象的引用；反之返回空(null)，同样下面给出一个示例：
XAML：
1 <Grid x:Name="LayoutRoot" Background="White">
2 <TextBlock x:Name="tb1" Text="Hello, World!"></TextBlock>
3 <TextBlock x:Name="tb2" Text="Hello, World 2!"></TextBlock>
4 <TextBlock x:Name="tb3" Text="Hello, World 3!"></TextBlock>
5 </Grid>
JavaScript：
function handleLoad(control, userContext, sender) {
var tb1 = sender.findName("tb1");
tb1.Text = "Hello World Updated";
}
-
GetHost方法
在界面元素上调用这个方法，可以得到包含这些界面元素的Silverlight控件的引用，这样可以获得Silverlight控件的版本号。
-
getParent方法
通过findName方法成功得到一个界面元素的引用后，可以调用在这个界面元素上调用getParent方法来返回其父元素的引用，同样如果找不到会返回null。
-
getValue/setValue方法
这两个方法用于访问与设置Silverlight中的附加属性。通过下面的例子可以对这两个方法的使用一目了然：
var tb1 = sender.findName("tb1");
tb1.setValue("Canvas.Top", 20);提示：
也可以通过"[]"这样索引的形式访问或修改附加属性的值，如上面的代码等价于下面的代码： tb1["Canvas.Top"] = 20;
-
setFontSource方法
这个方法是TextBlock独有的，通过这个方法可以给TextBlock应用新字体。如可以使用Downloader对象下载你想要设置的字体，在下载成功完成后将Downloader对象传递给TextBlock的SetFontSource方法，这样就可以将新字体应用到TextBlock。另外注意，你需要有分发这种字体的权利。下面的代码完整的展示了上文所述的场景：
function handleIt(sender, eventArgs) {
var control = sender.getHost(); var downloader = control.createObject("downloader");
downloader.addEventListener("Completed", "onCompleted");
downloader.open("GET", "NewFont.TTF");
downloader.send();
} function onCompleted(sender, evnetArgs) {
var myTextBlock = sender.findName("myTextBlock");
myTextBlock.setFontSource(sender);
myTextBlock.fontFamily = "Simhei";
}
界面元素也支持许多事件，可以通过前文介绍的JavaScript中的AddEventListener方法订阅这些事件，也可以直接在XAML中添加这些事件的处理方法（这是更常见的做法），下面依次介绍这些事件：
- GotFocus：当界面元素得到鼠标焦点的时候触发。
- LostFocus：该事件与GotFocus事件相反，在对象失去焦点时触发。
-
keyDown：该事件在界面元素拥有焦点，并在按下键盘键时触发，该事件包含两个参数，第一个是事件发送者的引用，第二个是KeyEventArgs对象，这个对象包含多个属性：
- key： 一个整数，代表哪一个键被按下，具体值定义于Silverlight SDK中。
- platfromKeyCode：这个值是由操作系统决定的
- shift：布尔型，表示shift键是否被按下
- ctrl：布尔型，表示Ctrl是否被按下
- keyUp：该事件在某个对象拥有焦点并释放按键的时候触发，此事件与KeyDown事件拥有相同的参数。
注意：KeyDown与KeyUp事件在Silverlight全屏模式下不会触发
- Loaded：该事件在对象被解析并加入到Silverlight控件之后，显示之前触发。
- MouseEnter：鼠标进入对象的区域时触发。
- MouseLeave：与MouseEnter相反，在鼠标离开对象区域时触发。
- MouseleftButtonDown：该事件在当用户在某个对象上按下鼠标左键时触发。
- MouseLeftButtonUp：该事件在松开鼠标左键的时候触发。
- MouseMove：该事件在鼠标在界面元素上移动时触发。
最后我们看一个使用JavaScript操作界面元素的例子 – 实现鼠标拖拽界面元素。
首先是XAML，其中包含了要拖动的元素，并使用XAML订阅了一些事件：
<Canvas Height="400" Width="400">
<Ellipse Canvas.Top="0" Height="10" Width="10" Fill="Black"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove" />
<Ellipse Canvas.Top="20" Height="10" Width="10" Fill="Black"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="40" Height="10" Width="10" Fill="Black"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="60" Height="10" Width="10" Fill="Black"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove"/>
</Canvas>
下面是事件处理函数：
var beginX;
var beginY;
var isMouseDown = false;
function onMouseDown(sender, mouseEventArgs)
{
beginX = mouseEventArgs.getPosition(null).x;
beginY = mouseEventArgs.getPosition(null).y;
isMouseDown = true;
sender.captureMouse();
}
function onMouseMove(sender, mouseEventArgs)
{
if (isMouseDown == true)
{
var currX = mouseEventArgs.getPosition(null).x;
var currY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currX - beginX;
sender["Canvas.Top"] += currY - beginY;
beginX = currX;
beginY = currY;
}
}
function onMouseUp(sender, mouseEventArgs)
{
isMouseDown = false;
sender.releaseMouseCapture();
}
其中CaptureMouse方法用于在拖动某个对象过程中，让该对象一直拥有鼠标事件，MouseMove的处理函数中通过参数传入的值持续改变被拖动对象的位置。我们还使用isMouseDown变量来保证只处理鼠标按下（即拖动过程中）时触发的MoveMouse事件。
下面给出用C#实现相同功能的代码，值得注意的是由于Canvas.Left和Canvas.Top属性是依赖属性，无法像JavaScript中那样直接访问，而需要使用Canvas.GetLeft和Canvas.GetTop这样的方法来访问：
private double beginX, beginY;
private bool isMouseDown = false; private void mouseInit(object sender, MouseButtonEventArgs e)
{
Ellipse el = sender as Ellipse;
el.CaptureMouse();
beginX = Canvas.GetLeft(el);
beginY = Canvas.GetTop(el);
isMouseDown = true;
} private void mouseMove(object sender, MouseEventArgs e)
{
if (isMouseDown)
{
Ellipse el = sender as Ellipse;
var x = e.GetPosition(null).X;
var y = e.GetPosition(null).Y;
Canvas.SetLeft(el, Canvas.GetLeft(el) + x - beginX);
Canvas.SetTop(el, Canvas.GetTop(el) + y - beginY);
beginX = x;
beginY = y;
}
} private void mouseRelease(object sender,MouseButtonEventArgs e)
{
Ellipse el = sender as Ellipse;
el.ReleaseMouseCapture();
isMouseDown = false;
}
本文完