Silverlight开发：XAML与JavaScript编程详解

# Silverlight 开发：XAML 与 JavaScript 编程详解 ## 1. Silverlight 基础操作 ### 1.1 XAML 片段与节点操作 在 Silverlight 开发中，`xamlFragment` 是一个包含新 XAML 片段的字符串。创建该片段后，会将其引用返回给 `textBlock` 变量，接着将此引用添加到根元素的子元素中，从而将其加入到 XAML 树结构里。 若要操作 XAML 节点的内容，可使用 `findName` 方法获取该节点的引用，再对引用进行编辑。以下是一个示例代码： ```javascript var SilverlightControl; var theTextBlock; function handleLoad(control, userContext, rootElement) { SilverlightControl = control; theTextBlock = SilverlightControl.content.findName("txt"); theTextBlock.addEventListener("MouseLeftButtonDown", "txtClicked"); } function txtClicked(sender, args) { theTextBlock.Text = "Hello to you too!"; } ``` 在 `handleLoad` 函数中，调用 `findName` 方法获取名为 `txt` 的 `TextBlock` 引用，然后为其添加了鼠标左键点击事件处理程序。 ### 1.2 创建对象与下载器使用 `createObject` 方法可用于创建特定用途的新对象。在 Silverlight 1.0 版本中，仅支持 `Downloader` 对象。该对象支持异步下载功能，与 Ajax 类似，具备一些属性、方法和事件来处理下载操作。 #### 1.2.1 Downloader 对象属性 | 属性名 | 描述 | | ---- | ---- | | `DownloadProgress` | 表示下载进度的百分比，值在 0 到 1 之间 | | `Status` | 获取当前下载会话的 HTTP 状态码，如 200 表示下载成功，404 表示资源未找到 | | `StatusText` | 获取与状态码关联的 HTTP 状态文本，如状态为 200 时，状态文本为 “OK” | | `URI` | 包含要下载对象的 URI | #### 1.2.2 Downloader 对象方法 | 方法名 | 描述 | | ---- | ---- | | `abort` | 取消当前下载并将所有属性重置为默认状态 | | `getResponseText` | 返回下载数据的字符串表示 | | `open` | 初始化下载会话，采用 W3C 定义的 HTTP 动词，Silverlight 1.0 仅支持 GET 动词 | | `send` | 执行下载请求 | #### 1.2.3 Downloader 对象事件 | 事件名 | 描述 | | ---- | ---- | | `completed` | 下载完成时触发 | | `downloadProgressChanged` | 下载过程中，进度变化 5% 或更多以及达到 100% 时触发 | 以下是使用 `Downloader` 对象的示例代码： ```javascript var downloader = control.createObject("downloader"); downloader.open("GET","movie.wmv",true); downloader.send(); ``` 若要监控下载进度和完成状态，可绑定相应的事件处理程序： ```javascript downloader.addEventListener("downloadProgressChanged", "handleDLProgress"); downloader.addEventListener("completed", "handleDLComplete"); function handleDLProgress(sender, args) { var ctrl = sender.getHost(); var t1 = ctrl.content.findName("txt1"); var v = sender.downloadProgress * 100; t1.Text = v + "%"; } function handleDLComplete(sender, args) { alert("Download complete"); } ``` ## 2. Silverlight XAML 元素分类 在处理 Silverlight XAML 时，XML 元素通常可分为以下六类： - **布局元素**：用于控制用户界面布局。 - **画笔**：用于绘制元素。 - **视觉元素**：为不同 UI 元素提供通用功能。 - **形状**：用于绘制 UI 元素。 - **复杂 UI 功能控件**：实现复杂的用户界面功能。 - **故事板及其动画配置**：用于实现动画效果。 ### 2.1 XAML 布局 - Canvas 元素 `<Canvas>` 元素是 Silverlight XAML 中应用布局的核心。它是一个绘图表面，可在其上放置其他元素。通过 `Canvas.Left` 和 `Canvas.Top` 属性指定元素相对于其容器的位置，还可使用 `Canvas.ZIndex` 属性设置元素的 Z 顺序，以确定多个重叠元素的绘制顺序。 以下是一个包含两个 `Canvas` 元素的 XAML 示例： ```xml <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <Canvas Width="214" Height="145" Canvas.Top="59" Canvas.Left="8"> <Rectangle Width="191" Height="104" Fill="White" Stroke="Black" Canvas.Top="19"/> </Canvas> <Canvas Width="254" Height="162" Canvas.Left="69" Canvas.Top="129"> <Rectangle Width="211" Height="154" Fill="Black" Stroke="Black"/> </Canvas> </Canvas> ``` 在这个示例中，白色矩形的 `Canvas.Top` 属性设置为 19，其容器 `Canvas` 的 `Canvas.Top` 为 59，`Canvas.Left` 为 8，所以白色矩形相对于屏幕顶部为 78 像素，左侧为 8 像素。由于 Silverlight 按 XAML 文件从上到下的顺序绘制元素，黑色矩形会绘制在白色矩形之上。 若要改变绘制顺序，可使用 `ZIndex` 属性： ```xml <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page"> <Canvas Canvas.ZIndex="1" Width="214" Height="145" Canvas.Top="59" Canvas.Left="8"> <Rectangle Width="191" Height="104" Fill="White" ```