25、深入探索Silverlight应用开发

最新推荐文章于 2025-10-23 11:35:23 发布

spice

最新推荐文章于 2025-10-23 11:35:23 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

分类专栏：探索Web开发与ASP.NET AJAX的奥秘文章标签： Silverlight XAML 应用开发

本文链接：https://blog.youkuaiyun.com/spice/article/details/149959535

探索Web开发与ASP.NET AJAX的奥秘专栏收录该内容

28 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

深入探索Silverlight应用开发

1. 基础XAML示例

首先来看一段简单的XAML代码：

<Canvas Background="White" x:Name="Page">
    <TextBlock Width="195" Height="42" Canvas.Left="28" Canvas.Top="35" 
               Text="Hello World!" TextWrapping="Wrap" x:Name="txt"/>
</Canvas>

这是标准的XML格式， <TextBlock> 元素是 <Canvas> 元素的子元素。通常，这段XAML会保存为 Page.xaml 文件。

2. 创建Silverlight插件实例

Silverlight.js 库包含 createObject 和 createObjectEx 函数，用于为当前浏览器生成正确的 <Object> 或 <Embed> 标签来创建Silverlight组件。这两个函数功能相同，区别在于 createObjectEx 使用JSON符号来打包参数，使用起来更方便。

为了遵循良好的编程实践，将创建Silverlight组件的调用与宿主页面分离，把Silverlight组件的参数细节外部化。以下是页面的HTML标记示例：

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

createSilverlight 函数会放在一个外部的JavaScript文件中，由HTML引用。该函数会调用 createObject 或 createObjectEx ，示例代码如下：

function createSilverlight() {
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0"
        },
        events: {
            onLoad: handleLoad
        }
    });
}

这里使用的参数解释如下：
- source ：指定要加载到控件中进行渲染的XAML文件，这里是 Page.xaml 。
- parentElement ：Silverlight控件所在的HTML <div> 元素，即 SilverlightControlHost 。
- id ：Silverlight控件的ID，为 SilverlightControl 。
- width 和 height ：控件的宽度和高度，这里设置为100%，会填充所在的 <div> 。
- version ：使用的Silverlight版本为1.0。
- onLoad ：当Silverlight组件被浏览器渲染时，会执行 handleLoad 这个JavaScript函数。

3. 编写应用逻辑

前面定义了 handleLoad JavaScript函数作为事件处理逻辑，用于响应Silverlight组件的加载和渲染。大多数Silverlight事件处理程序接受两个参数 sender 和 args ，分别表示引发事件的组件引用和相关参数。但Silverlight加载事件是个例外，它接受三个参数： control （Silverlight控件的引用）、 userContext （控件的用户上下文，是一个自由格式的字符串，可在 createObject 或 createObjectEx 函数中分配，方便开发者区分页面上的多个Silverlight控件）和 rootElement （控件根 <Canvas> 的引用）。

以下是一个响应应用加载并为 <TextBlock> 创建新事件处理程序的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!";
}

当Silverlight控件渲染时，代码会找到 <TextBlock> 元素并创建一个新的事件监听器，当鼠标点击时会调用 txtClicked 函数，将 <TextBlock> 的内容改为“Hello to you too!”。

4. 整合到HTML中

HTML是Silverlight体验的核心，因为Silverlight是浏览器的插件。以下是完整的HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FirstSilverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="CreateSilverlight.js"> </script>
    <script type="text/javascript" src="code.js"> </script>
    <style type="text/css">
      .silverlightHost {
            height: 480px;
            width: 640px;
        }
    </style>
</head>
<body>
    <div id="SilverlightControlHost" class="silverlightHost">
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

这个HTML文件引用了 Silverlight.js 、 CreateSilverlight.js 和 code.js 文件，分别是Silverlight SDK脚本、包含 createSilverlight 函数的脚本和包含事件处理代码的脚本。同时，通过 <style> 标签定义了包含Silverlight控件的 <div> 的尺寸。

5. Silverlight控件的属性

Silverlight插件作为一个控件，可以通过其属性、方法和事件进行编程。以下是一些常用属性的介绍：
| 属性 | 描述 | 使用方式 |
| ---- | ---- | ---- |
| Source | 确定要加载到控件中进行渲染的XAML。 | 可以使用静态文件引用（如 Page.xaml ）、动态URL引用（通过服务器端应用生成XAML）或嵌入式XAML引用（在HTML的 <script> 标签中嵌入XAML）。 |
| parentElement | Silverlight组件所在的HTML <div> 元素的名称。 | 必须正确设置该属性，确保Silverlight应用正常工作。 |
| id | 控件的ID，用于从JavaScript引用和操作控件或其DOM。 | 为控件指定唯一的ID。 |
| width 和 height | 设置控件的宽度和高度，可以是百分比或像素值。 | 受包含控件的 <div> 大小限制。 |
| background | 设置控件的背景颜色。 | 可以使用命名颜色（如 Blue ）或ARGB值（如 #00FF00BB ）。 |
| framerate | 设置动画的最大帧率，默认24帧/秒。 | 对于动画较多的应用，可调整帧率以优化效果。 |
| isWindowless | 默认为 false ，设置为 true 时，HTML内容可以写在Silverlight内容之上。 | 例如，在需要在Silverlight页面上显示HTML表单或其他图形时使用。 |
| inplaceInstallPrompt | 控制Silverlight的安装模式，默认 false 。 | false 时，未安装Silverlight会显示徽章，点击后跳转到微软网站安装； true 时，徽章包含许可协议链接，点击自动下载安装。 |
| FullScreen | 使Silverlight以全屏模式运行。 | 设置为 true 进入全屏， false 退出全屏。 |
| actualWidth 和 actualHeight | 当 width 和 height 设置为百分比时，可读取控件的实际宽度和高度。 | 值变化时会触发 onResize 事件。 |
| initParams | 用于设置控件的额外参数，自由格式。 | 例如，从服务器端控件生成Silverlight内容时，可在客户端维护参数状态。 |
| userContext | 自由格式字符串，值会传递给加载处理程序。 | 可用于区分页面上的多个Silverlight控件。 |
| IsLoaded | 只读属性，控件加载完成后为 true ，否则为 false 。 | 用于判断控件是否加载完成。 |
| enableFrameRateCounter | 用于调试和测试，默认 false 。 | 设置为 true 显示当前渲染帧率。 |
| EnableHtmlAccess | 默认 true ，设置为 true 时，XAML内容可从浏览器DOM完全访问。 | 影响XAML内容与浏览器DOM的交互。 |
| enableRedrawRegions | 调试和优化工具，默认 false 。 | 设置为 true 显示每一帧重绘的区域。 |

6. 嵌入式XAML的使用

以下是在 <script> 标签中嵌入XAML的示例：

<script type="text/xaml" id="xamlContent">
    <?xml version="1.0"?>
    <Canvas xmlns="http://schemas.microsoft.com/client/2007" 
            Background="Wheat">
        <TextBlock Canvas.Left="20" FontSize="24">Hello World</TextBlock>
    </Canvas>
</script>

初始化Silverlight控件时，将 Source 属性设置为 #xamlContent ：

function createSilverlight() {
    Silverlight.createObjectEx({
        source: "#xamlContent",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0"
        },
        events: {
            onLoad: handleLoad
        }
    });
}

7. `isWindowless` 属性示例

以下是设置 isWindowless 属性为 true 的示例：

function createSilverlight() {
    Silverlight.createObjectEx({
        source: "#xamlContent",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            isWindowless: "true",
            version: "1.0"
        },
        events: {
            onLoad: handleLoad
        }
    });
}

在HTML中添加一个 <div> ：

<div id="SilverlightControlHost" class="silverlightHost">
    <script type="text/javascript">
        createSilverlight();
    </script>
    <div style="position: absolute; z-index: 1; left: 24px; top: 47px"
         id="layer1">
        <table style="width: 100%" cellspacing="1">
            <tr>
                <td style="width: 108px" class="style2">Name</td>
                <td><input name="Text1" type="text" style="width: 482px"></td>
            </tr>
        </table>
    </div>
</div>

当 isWindowless 为 true 时，HTML内容会显示在Silverlight内容之上；否则，HTML内容会被Silverlight控件遮挡。

8. `initParams` 属性示例

以下是设置 initParams 参数的 createSilverlight 函数示例：

function createSilverlight() {
    Sys.Silverlight.createObject(
        "Scene.xaml",
        document.getElementById("SilverlightControlHost"),
        "mySilverlightControl",
        {
            width: '300',
            height: '300',
            inplaceInstallPrompt: false,
            background: 'white',
            isWindowless: 'false',
            framerate: '24',
            version: '1.0'
        },
        {
            onError: null,
            onLoad: handleLoad
        },
        "value1, value2, value3", // Parameter List
        null
    );
}

开发者需要编写代码来读取这些参数并做出相应响应。

9. Silverlight控件事件

Silverlight提供了多个事件，可用于管理应用的加载、卸载和全屏变化等事件：
- onLoad 事件 ：指定在Silverlight控件正确加载和运行时执行的JavaScript事件处理程序。处理程序接受三个参数 control 、 userContext 和 rootElement 。示例代码如下：

function handleLoad(control, userContext, rootElement) {
    alert("I loaded successfully!");
}

onError 事件 ：当Silverlight遇到错误时执行的JavaScript事件处理程序。处理程序的 sender 参数包含当前XAML元素， errorArgs 对象包含错误详细信息（ errorType 、 errorMessage 和 errorCode ）。示例代码如下：

function OnErrorEventHandler(sender, errorArgs) {
    var errorMsg = "Error: \n\n";
    errorMsg += "Error Type:    " + errorArgs.errorType + "\n";
    errorMsg += "Error Message: " + errorArgs.errorMessage + "\n";
    errorMsg += "Error Code:    " + errorArgs.errorCode + "\n";
    switch (errorArgs.errorType) {
        case "RuntimeError":
            if (errorArgs.lineNumber != 0) {
                errorMsg += "Line: " + errorArgs.lineNumber + "\n";
                errorMsg += "Position: " + errorArgs.charPosition + "\n";
            }
            errorMsg += "MethodName: " + errorArgs.methodName + "\n";
            break;
        case "ParserError":
            errorMsg += "Xaml File: " + errorArgs.xamlFile + "\n";
            errorMsg += "Xml Element: " + errorArgs.xmlElement + "\n";
            errorMsg += "Xml Attribute: " + errorArgs.xmlAttribute + "\n";
            errorMsg += "Line: " + errorArgs.lineNumber + "\n";
            errorMsg += "Position: " + errorArgs.charPosition + "\n";
            break;
        default:
            break;
    }
    alert(errorMsg);
}

onFullScreenChange 事件 ：当设置 FullScreen 属性进入或退出全屏模式时触发，可执行相应代码。
onResize 事件 ：当 actualWidth 或 actualHeight 属性变化时触发，可用于根据浏览器窗口大小动态调整控件大小。

10. Silverlight控件方法

createFromXaml 方法非常有用，可将新的XAML添加到控件的当前渲染树中。该方法接受两个参数：包含XAML的字符串和名称范围（可选）。注意，只能添加具有单个根节点的XAML元素。示例代码如下：

function handleLoad(control, userContext, rootElement) {
    var xamlFragment = '<TextBlock Canvas.Top="60" Text="Using CreateFromXAML" />';
    textBlock = control.content.createFromXaml(xamlFragment);
    rootElement.children.add(textBlock);
}

这个方法不会立即将新XAML添加到渲染树，而是创建一个节点并返回其引用，然后可以将该节点放置在XAML渲染树的正确位置。

通过以上内容，我们深入了解了Silverlight应用的开发，包括创建实例、编写逻辑、使用控件的属性、事件和方法等方面。希望这些内容能帮助开发者更好地利用Silverlight开发出优秀的Web应用。

深入探索Silverlight应用开发

11. 操作步骤总结

为了更清晰地展示开发Silverlight应用的流程，下面将关键操作步骤进行总结：
1. 创建XAML文件 ：编写包含界面元素的XAML代码，如前面的 Page.xaml 示例。
2. 引入Silverlight.js库 ：在HTML文件中引用 Silverlight.js ，用于创建Silverlight组件。
3. 编写创建Silverlight组件的函数 ：在外部JavaScript文件中编写 createSilverlight 函数，使用 createObject 或 createObjectEx 方法创建Silverlight控件。示例代码如下：

function createSilverlight() {
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0"
        },
        events: {
            onLoad: handleLoad
        }
    });
}

编写事件处理逻辑 ：定义事件处理函数，如 handleLoad 和 txtClicked ，用于处理Silverlight组件的加载和用户交互。示例代码如下：

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!";
}

整合到HTML文件 ：将上述代码整合到HTML文件中，确保引用了必要的JavaScript文件，并设置好样式。示例代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FirstSilverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="CreateSilverlight.js"> </script>
    <script type="text/javascript" src="code.js"> </script>
    <style type="text/css">
      .silverlightHost {
            height: 480px;
            width: 640px;
        }
    </style>
</head>
<body>
    <div id="SilverlightControlHost" class="silverlightHost">
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

12. 流程图展示

下面是一个使用mermaid绘制的流程图，展示了开发Silverlight应用的主要流程：

graph LR
    A[创建XAML文件] --> B[引入Silverlight.js库]
    B --> C[编写创建Silverlight组件的函数]
    C --> D[编写事件处理逻辑]
    D --> E[整合到HTML文件]

13. 常见问题及解决方法

在开发Silverlight应用过程中，可能会遇到一些常见问题，以下是一些问题及对应的解决方法：
| 问题 | 描述 | 解决方法 |
| ---- | ---- | ---- |
| XAML无法加载 | Silverlight控件未能正确加载XAML文件。 | 检查 Source 属性是否正确设置，确保文件路径和文件名无误；检查服务器是否正常响应，文件是否存在。 |
| 事件处理程序不执行 | 定义的事件处理程序没有按预期执行。 | 检查事件名称是否正确，如 onLoad 、 MouseLeftButtonDown 等；确保事件处理程序的参数和返回值符合要求。 |
| HTML内容无法显示在Silverlight之上 | 设置 isWindowless 为 true 后，HTML内容仍被Silverlight遮挡。 | 检查 z-index 属性是否正确设置，确保HTML元素的 z-index 值大于Silverlight控件；确保 isWindowless 属性在 createObjectEx 中正确设置。 |

14. 进一步优化建议

为了提高Silverlight应用的性能和用户体验，可以考虑以下优化建议：
- 合理设置帧率 ：根据应用的动画复杂度，调整 framerate 属性，避免过高或过低的帧率影响性能和视觉效果。
- 使用嵌入式XAML ：对于简单的界面元素，可以使用嵌入式XAML，减少文件请求，提高加载速度。
- 优化事件处理 ：避免在事件处理程序中执行耗时操作，以免影响应用的响应性能。
- 缓存常用元素 ：在事件处理程序中，尽量缓存常用的元素引用，避免重复查找，提高效率。例如：

var SilverlightControl;
var theTextBlock;

function handleLoad(control, userContext, rootElement) {
    SilverlightControl = control;
    theTextBlock = SilverlightControl.content.findName("txt");
    // 后续操作直接使用缓存的引用
}

15. 总结

通过前面的内容，我们全面了解了Silverlight应用开发的各个方面，包括基础的XAML编写、Silverlight组件的创建、应用逻辑的编写、控件属性和事件的使用，以及常见问题的解决和优化建议。开发Silverlight应用需要掌握XAML、JavaScript和HTML等多种技术，并且要合理运用控件的属性、事件和方法，以实现丰富的交互和良好的用户体验。

在实际开发中，开发者可以根据具体需求选择合适的属性和事件，灵活运用各种方法来实现功能。同时，要注意性能优化和常见问题的处理，确保应用的稳定性和流畅性。希望这些内容能帮助开发者在Silverlight应用开发领域取得更好的成果。

16. 未来展望

虽然Silverlight在过去为Web开发带来了丰富的交互体验，但随着技术的不断发展，新的Web技术如HTML5、CSS3和JavaScript框架不断涌现，Silverlight的使用逐渐减少。然而，对于一些旧的项目或特定的应用场景，Silverlight仍然具有一定的价值。未来，开发者可以结合新的技术趋势，对Silverlight应用进行升级和改造，或者将其与其他技术结合使用，以满足不断变化的用户需求。

同时，对于学习Web开发的新手来说，了解Silverlight的开发原理和技术细节，有助于加深对Web开发的理解，掌握不同技术的优缺点，从而更好地选择适合自己项目的技术栈。

总之，Silverlight作为一种曾经重要的Web开发技术，虽然其热度有所下降，但它的经验和技术思想仍然值得我们学习和借鉴。