Silverlight初学者的入门课程

资料,教程,编程,文集

本文由leochen雷少贡献
pdf文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
Silverlight
初学者的入门课程
夜晚回家
2010-03-31

程序员之家

目录
第一章 什么是 Silverlight？ …… 第二章 Silverlight 1 和 Silverlight 2 之间的区别 …… 第三章 Silverlight 和 WPF 之间的不同 …… 第四章 开发 Silverlight 应用程序需要的工具 …… Silverlight SDK …… 4 4 4 5 5
如何选择 Expression Studio 或 Visual Studio …… 5 第五章 Silverlight 运行时和 Silverlight SDK 之间的不同…… 5 第六章 什么是 XAML？ …… 6 第七章 什么是.xap 文件？ …… 6 第八章 “Hello World”Silverlight 应用程序 …… 7 第九章 Visual Studio 默认创建的文件 …… 8 第十章 生成并运行“Hello World”Silverlight 应用程序 …… 9 第十一章 什么是 app.xaml？ …… 10 第十二章 Page.xaml 文件 …… 11 第十三章 从 XAML 标签开始 …… 11 第十四章 如何在 Web 页面放置 Silverlight 控件？ …… 12 第十五章 如何在 Silverlight 控件中设置默认.xaml 页面？ …… 13 第十六章 如何从其他的 XAML 页面打开 XAML 页面？ …… 13 第十七章 从 Silverlight 控件打开特定的 xaml 页 …… 14 第十八章 在 Silverlight 布局控件 …… 15 Silverlight 中的布局面板控件 - Canvas …… 15 Silverlight 中的布局面板控件 - StackPanel …… 16 Silverlight 中的布局面板控件 – Grid …… 17 第十九章 如何在 Silverlight 控件中显示图像？…… 18 Image.Source 属性 …… 19 Image.stretch 属性 …… 20 Width 和 Height 属性 …… 21 Image.Clip 属性 …… 21 第二十章 在 Silverlight 中如何拖动或移动图像或对象？ …… 21 第二十一章 如何从 页面传递参数到 Silverlight 控件？ …… 23 InitParameters …… 23 如何设置 InitParameters …… 从 App.xaml 传递参数到其他页面 …… 在 XAML 页面使用 IDictionary 参数 …… 第二十二章 如何从 Silverlight 控件调用 WCF 方法？ …… Silverlight 中使用 WCF …… 第二十三章 Silverlight 中使用 WCF 示例…… 第二十四章 从 Silverlight 控件访问 Session 变量 …… 第二十五章 创建 WCF 访问检索 Session 数据示例 …… 第二十六章 如何从 Silverlight 代码调用 Javascript 函数？ …… 第二十七章 如何在 Silverlight 页面上弹出层？…… 第二十八章 为 Silverlight 控件添加工具提示 …… 24 24 25 25 26 27 29 30 32 33 35
~
2~
程序员之家

简单的文本提示 …… 显示富 UI 元素提示 …… 编程方式设置工具提示 …… 第二十九章 如何在 Silverlight 播放音频或声音文件？…… 第三十章 在 Silverlight 中如何显示右键菜单？…… 第

资料,教程,编程,文集

三十一章 介绍 Silverlight 绑定数据 …… 第三十二章 Silverlight 数据绑定示例：BindingMode 枚举 …… 第三十三章 如何为 Siverlight 控件设置背景图片 …… 第三十四章 Javascript 检测是否安装了 Silverlight……
35 36 37 37 38 39 42 44 45
~3~
程序员之家

在这套 Silverlight 学习系列中将学习 Silverlight 基础并使用 Silverlight 编写 web 应用程序。这套 Silverlight 学习系列从 Silverlight 基础概念开始。
本书所带的附件可在 /index.php?topic=2000.0 免费下载， 大家也可上此论坛共享学习心得，讨论开发成果，交流开发经验。
第一章
什么是 Silverlight？
Silverlight 是基于 Web 的技术， 2007 年 4 月由微软推出。 在 Silverlight 被认为是 Adobes Flash 的竞争者。 Silverlight 应用程序是以名为 XAML 的文本标记语言把信息传递到浏览器。Flash 和 XAML 一个重要的不同是 Flash 是已编译的应用程序而 XAML 是基于文本的应用程序。 搜索 引擎可以分析和检索 XAML 中的内容，这对于网站管理员来说是非常有用的。 对于经常上网的用户来说， Silverlight 是一个具有支持视频、 音频、 动画的浏览器插件。 对于 Web 开发人员来说，Silverlight 提供了更多功能。使用 Silverlight 技术不需 要更多的编程来支持视频、音频文件。这样它允许处理来至网页上的事件（像开始/结束视 频播放等） 。
第二章
Silverlight 1 和 Silverlight 2 之间的区别
Silverlight 1 纯粹基于 XAML 和 Javascript。 所有的代码都由 Javascript 和 XAML 编写的。 Silverlight 2 支持代码托管。当安装 Silverlight 2 运行时，在客户端机器上安装 了相应版本的.NET 运行时。 这样允许.NET 程序员在客户端 PC 上编写托管代码执行可以提 供了更好的用户体验。当然，这些代码在访问客户端计算机时有安全限制。 开发人员必须意识到如果终端客户拒绝在他们的客户端计算机上安装.NET 运行时，那么 Silverlight 2 应用程序将无法运行。
第三章
Silverlight 和 WPF 之间的不同
Silverlight 和 Windows Presentation Foundation(WPF)是微软的两种不同产品， 但是有很多重叠。Silverlight 从特点和功能方面来说是 WPF 的一个子集。 Silverlight 是 Microsoft 用于和 Adobes Flash 竞争的技术，这意味着是基于网络 应用的富客户端开发。 WPF 是微软为开发桌面平台增强图形功能的技术。此外，WPF 应用程序在 Web 浏览器中加 载为 Web
应用程序提供丰富的图形特征。 Web 浏览器应用 （WBA） 是基于 WPF 技术使用 XAML 为浏览器应用程序加载用户界面。XAML 支持微软提出的声明性编程模型 - 可扩展应用程 序标记语言（eXtended Application Markup Language） 。XAML 文

资料,教程,编程,文集

件在 Web 服务 中是作为可加载的独立的文件，但需要下载到浏览器并通过客户端浏览器的.NET 运行时转 换为用户界面。
~4~
程序员之家

WPF 运行在.NET 运行时上，开发人员可以利用丰富的.NET Framework 和 WPF 类库建立 非常酷的 windows 应用程序。WPF 支持 3-D 图形，复杂的动画，硬件加速等。
第四章
开发 Silverlight 应用程序需要的工具
在 Web 浏览器中运行 Silverlight 应用程序，需要在客户端浏览器安装 Silverlight 运行时插件。这是轻量级.NET 运行时的版本。 然而，要开发 Silverlight 应用程序，你还需要一些工具。
Silverlight SDK
包括一套用来编译和生成所需的 Silverlight 控件的工具。 如果你习惯使用记事本编写 HTML 代码和从控制台工具编译.NET 应用程序，你仅需要 Silverlight SDK 开发 Silverlight 应用程序。然而，许多人喜欢使用各种 IDE 来快 速开发应用程序。微软提供了两个独立的工具来开发 Silverlight 应用程序： 1. Microsoft Expression Studio - 这个工具是为 Web 设计者创建 Silverlight 应用程序提供了可视化元素。Expression Studio 推荐给 Web 设计者，用于创建更强可 视内容和图形的富互联网应用（RIA） 。对创建加强图形元素有几方面的特点 – 颜色选择、 字体选择等。 2. Microsoft Visual Studio – 可集成到微软.NET 开发环境中。程序员可以使用 Visual Studio 开发 Silverlight 应用程序。 Visual Studio 允许程序使用任何.NET 语言（像 C#、 等）开发复杂的 Silverlight 应用程序。 如果你使用 Visual Studio 开发 Silverlight 应用程序，你可以从 /downloads/details.aspx?FamilyId=c22d6a7b -546f-4407-8ef6-d60c8ee221ed&displaylang=en 中下载 Silverlight 开发工 具。下载工具中包括 Service Pack 1 和 Silverlight SDK。
如何选择 Expression Studio 或 Visual Studio
如果你的 Silverlight 应用程序仅包括图形等可视化元素， 那么你可以使用 Expression Studio 来开发 Silverlight 应用程序。不过，如果你是程序员并且你的 Silverlight 应用程序包括程序逻辑，那么你可能需要使用 Visual Studio。
第五章
Silverlight 运行时和 Silverlight SDK 之间的不同
Silverlight 运行时是浏览器支持 Silverlight 应用程序的插件。 如果在浏览器上没有 安装 Silverlight 运行时，在浏览器中不能运行 Silverlight 元素。你可以设置 Silverlight 标签， 在浏览器中加载 Silverlight 应用程序时浏览器将自动提示用
户下 载和安装 Silverlight 插件。 在客户端只需要安装一次 Silverlight 运行时。一旦安装了 Silverlight 运行时，当 Silverlight 应用程序在浏览器加载时会自动加载。
~5~
程序员之家

资料,教程,编程,文集

Silverlight SDK 是一套工具、文档、示例和帮助开发人员更快开发 Silverlight 应 用程序而提供的模板。对于开发 Silverlight 应用程序 SDK 不是一定要的，但有了 SDK 可以使开发变得更简单。
第六章
什么是 XAML？
XAML 支持扩展应用语言（eXtended Application Markup Language） 。XAML 包含 XML 用于 Silverlight 或 WPF 应用程序声明特定的用户界面。 例如，如果需要呈现一个矩形，可以用下面的 XAML 表示：
<Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100" Height="100" /> </Canvas>
上面的 xaml 代码被执行时，会显示一个红色的矩形，如下图所示：
你可能注意到，XAML 和 HTML 实际上非常相似。
第七章
什么是.xap 文件？
.xap 文件是 Silverlight 应用程序输出的压缩文件。.xap 文件包括 AppManifest.xaml、编译输出的 Silverlight 项目程序集（.dll）和 Silverlight 应用程序需要的资源文件。 在.aspx 页面和.html 页面中可以通过标签来加载 Silverlight 组件。 在.aspx 页面中 使用标签来加载.xap 文件； 在.html 页面中需要使用 HTML 标签中 的<object>标签来加载.xap 文件。 “.xap”文件（发音“zap” ）使用标准的.zip 压缩算法，减少客户端下载文件的大小。 一个使用 或 C#开发的.NET Silverlight 应用程序 - “hello world”大概 5KB 大小。 让我们来看一下.xap 文件。 打开 Visual Studio，在项目类型下面选择“Silverlight 应用程序” ，创建一个新项 目。选择项目名字为“SilverlightTest” 。在下一屏幕，选择选项“向解决方案添加新 Web 项目以承载 Silverlight” Visual Studio 创建一个项目包括两个文件：
~6~
程序员之家

1. App.xaml 2. Page.xaml 按 Ctrl + F5 编译和运行应用程序。你可能看见浏览器打开一个空页面（这个页面时空的 。 因为没有在默认 xaml 文件做任何事情） 现在打开你的 Windows 资源管理器并查看项目文件夹下的 bin\debug 文件夹。你可以看 见一个叫“SilverlightTest.xap”的文件。 重命名这个文件为“SilverlightTest.zip”并使用解压工具打开它。可以看见和任何 zip 文件一样，它包含项目输出的 dll 和被叫做“AppManifest.xaml”的文件。
第八章
“Hello World”Silverlight 应用程序
打开 Visual Studio 并选中菜单“文件” > “新建” > “项目” 在你喜欢的语言下面选择项目类型为 “S
ilverlight” 并选择 “Silverlight 应用程序” 模板。在这里我选择使用 Visual C#语言。 为项目取名为“MySilverlightApp”并选中选项“为解决方案创建目录” ，因此项目中 的文件组织在一个文件夹结构中。
我们需要一个 Web 页面来加载我们开

资料,教程,编程,文集

发的 Silverlight 组件。Visual Studio 提供自 动创建 web 站点的选项使这个工作更简单。按下图选择选项。
~7~
程序员之家

准备大干一场吧！只要按下 OK，Visual Studio 将创建 2 个项目和一系列文件。在下一 章我们将分析 Visual Studio 创建的这些文件。
第九章
Visual Studio 默认创建的文件
当使用 Visual Studio 2008 创建一个新的 Silverlight 应用程序时，它创建了默认 的几个文件。创建一个带承载 Silverlight 项目的 Web 站点，看解决方案资源管理器：
~8~
程序员之家

分析其中的一些文件。 AppManifest.xml 此文件定义了开发客户端应用的程序集。
第十章
生成并运行“Hello World”Silverlight 应用程序
这时候生成并运行你的第一个 Silverlight 应用程序。按 Ctrl + F5 生成并运行你的程 序。如果设置都是正确的，在 IE 中将启动默认页面并自动加载 Silverlight 对象。 你将看见一个在浏览器打开的空白页面，即使没有任何的控件。 回到 Visual Studio 并打开承载 Silverlight 对象的 Web 页面。在这个项目中，这个 文件被命名为“MySilverlightAppTestPage.aspx” ，该文件的内容如下所示：
<%@ Page Language="C#" AutoEventWireup="true" %> <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
上面大部分东西和 开发是类似的。有一些行必须注意：
第二行定义了 Web 页面承载的 Silverlight 控件。 “Source”属性定义了 Web 页面使用 的.xap 文件。 .xap 文件包括包含.xaml 文件中的 XAML 及代码和被执行的 Silverlight 插件。 在当前例子中，仅有一个叫做 Page.xaml 的 xaml 文件。当编译解决方案时，这个文件编 译在以.xap 为后缀名的特殊文件（MySilverlightApp.xap）中。
第十一章 什么是 app.xaml？
App.xaml 文件是用于 Silverlight 应用程序声明共享资源， 像笔刷、 各种样式资源等。 此外，app.xaml 的后置代码用来处理全局应用集事件像 Application_Startup， Application_Exit 和 Application_UnhandledException 等。 （类似于 应用程序中的 Global.asax 文件） 当 Visual Studio 自动创建 App.xaml 文件，它会为少数几个事件创建事件处理程序， 并提供默认事件处理代码。你可以适当的修改这些代码。
~ 10 ~
程序员之家

private void Application_Startup(object sender, StartupEventArgs e) { } private void Application
_Exit(object sender, EventArgs e) { } private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { }

资料,教程,编程,文集

对于 开发人员来说，上面代码看起来非常熟悉。这类似于 Global.asax 中的应 用及事件处理程序。
第十二章 Page.xaml 文件
当使用 Visual Studio 2008 创建一个 Silverlight 项目是，它创建了一个叫 “Page.xaml”的默认 xaml 文件。这是 Visual Studio 创建的一个虚拟的开始页面， 它不包含任何可见的 UI 元素。page.xaml 文件默认的内容如下所示：
<Grid x:Name="LayoutRoot" Background="White"> </Grid>
上面的代码显示一个用户控件和一个 Grid 控件。UserControl 是最高层次的控件包含 xaml 文件中的所有 UI 元素。 Grid 控件是布局面板可以包含其他 UI 元素。在.xaml 控件中的所有 UI 元素必须放在布 局面板中。在 Silverlight 2.0 中有 3 种不同的布局面板。将在后面的章节更多的介绍 布局控件。 编译 Silverlight 应用程序项目时，会编译所有的.xaml 文件和各种资源文件到一个程 序集文件中。这个程序集文件以.xap 为扩展名文件名和项目的名字相同。 为了在 web 页面中放置 Silverlight 控件，必须在 Web 页面指定.xap 文件。在 web 页 面中指定了.xap 文件，默认.xaml 页面会显示。基于用户行为，可以打开或关闭在.xap 程序集中包含的各个.xaml 文件（Silverlight 应用程序项目） 。
第十三章 从 XAML 标签开始
在 Page.xaml 文件中添加一个 xaml 标签，看它如何工作。 从 Visual Studio 项目中打开.xaml 文件并将下面代码放在 Grid 元素中间：
<Rectangle Fill="Blue" Width="100" Height="100"/>
~ 11 ~
程序员之家

现在编译和运行这个应用程序。可以在 Web 页面上看见一个蓝色的矩形。 如上所述，Silverlight 中的 xaml 页面中元素使用 XAML 标签定义。Silverlight 2 提供了几个 XAML 标签，包括通用标签形式 – 像文本框，按钮等和其他格式 UI 元素。 有关 Visual Studio 的一个好处是，当你键入 XAML 标记时可以在页面看到一个预览效 果。当你在你的.xaml 页面输入上面的 xaml 标签，你将在 Visual Studio 的设计预览 中看到如下的效果：
你可按“XAML”和“预览”之间的两个交换图片在代码和预览之间切换。
第十四章 如何在 Web 页面放置 Silverlight 控件？
每个 Silverlight 应用程序项目可以包含多个.xaml 页面。 创建一个新的 Silverlight 应用程序项目时，Visual Studio 会创建一个叫 Page1.xaml 的默认.xaml 文件。可以 添加更多的.xaml 页，在解决方案资源管理器中选择“添加”-&
gt;“新建项” ，然后选择 “Silverlight 用户控件” 。 在一个 Web 页面中使用 xaml 标签放置一个或多个 Silverlight 应用程序，如下所示：
在上面标签中， “source”属性表示编译 Silverlight 项目编译后输出的 xap 文件的名 字。

资料,教程,编程,文集

.xap 文件包含在 Silverlight 应用程序项目中所有编译后的.xaml 文件。 当编译 Silverlight 应用程序项目时，生成一个以.xap 为后缀名的程序集。例如，你的 Silverlight 项目名为“MySilverlightControl” ，当编译时，将产生一个名为 MySilverlightControl.xap 的程序集。 每个 Silverlight 项目都可以包含多个.xaml 文件。每个.xaml 文件就像一个页面或它 自身的形式。 当你放置一个 Silverlight 应用程序在 Web 页面， 同一时间只有一个.xaml 控件可见。基于各种用户行为，可以动态打开各个.xaml 页面（就像在一个 Windows 应用 程序中打开窗体） 。
第十五章 如何在 Silverlight 控件中设置默认.xaml 页面？
每个 Silverlight 项目可以有多个.xaml 文件。但每次只能看到一个.xaml 页面。 当你在 Visual Studio 中创建一个 Silverlight 项目是，将创建一个默认的名字叫做 “Page1.xaml” 的.xaml 文件， 当打开承载 Silverlight 项目的 Web 页面时这个.xaml 控件默认显示。 可以通过设置“Application.RootVisual”属性来更改默认的.xaml 页面。 为了试验，在 Silverlight 项目中添加一个名为“Page2.xaml”的.xaml 文件。 现在，打开 Silverlight 项目中的 App.xaml.cs 文件。看看 Application_Startup 事件处理程序。在这里可以看见放置的默认.xaml 页面。为了改变默认的.xaml 页面，可 以设置 Application.RootVisual 属性指定在.xaml 页面使用的类名名称。
private void Application_Startup(object sender, StartupEventArgs e) { this.RootVisual = new Page2(); }
更改这个值后，编译和运行应用程序。当 Web 页面打开时，可以在 Web 页面中看见显示新 的.xaml 控件。
第十六章 如何从其他的 XAML 页面打开 XAML 页面？
在 Silverlight 应用程序中， 可以有多个 XAML 页面。 当在 Web 页面中使用.xap 文件时， 一次仅有一个 XAML 文件显示。在 App.xaml 文件中通过下面代码可以决定默认显示的 XAML 文件：
this.RootVisual = new Page1();
你可以改变上面代码中的类名，默认打开其他 xaml 文件。例如，你可能考虑有一个 xaml 文件提供用户输入登录信息。当用户点击“提交”按钮后，在登录验证成功后，可能想重定 向到其他的 xaml 文件。
~ 13 ~
程序员之家

这时可以设置 xaml 页面的“Content”属性。
private void SubmitButton_Click(object sender, RoutedEventArgs e) { this.Content = new NewXamlPage(); }
上面代码显示如何在按钮的单击事件处理中设置 xa
ml 控件的“Content”属性。当用户 点击提交按钮后，新的 xaml 文件（NewXamlPage）将打开，原始的 xaml 文件将回收。
第十七章 从 Silverlight 控件打开特定的 xaml 页
每个 Silverlight 应用程序项目可以包含多个 xaml 页面

资料,教程,编程,文集

。 当你从 web 页面指定.xap 文 件时，可以通过设置 Application.RootVisual 属性来确定默认显示的 xaml 页。 可能有这种情况，从不同的 Web 页面指定相同的.xap 文件显示不同的 XAML 文件。可以通 过 xaml 文件名或通过 Silverlight 控件的 InitParameters 属性确定一些其他类型。 这个属性可以从 Web 页面设置 Silverlight 控件。从 Web 页面设置的值将通过 Silverlight 控件读取并打开合适的 xaml 页面。 为了说明这点，我们创建一个 Silverlight 项目，名为“OpenSpecificXaml” 。 当你编译生成项目后，放置 Silverlight 控件在你的 Web 页面，如下所示：
在上面代码，看见如下代码
InitParameters="PageName=Page1"
这里设置的“InitParameters”具有键-值对关系标识默认打开的 xaml 页面。 现在， 将在 App.xaml 文件中读取这个属性并为 Application.RootVisual 属性设置适 当的页面。这里有个示例用在 App.xaml.cs 中实现这一目标：
private void Application_Startup(object sender, StartupEventArgs e) {
~ 14 ~
程序员之家

IDictionary parameters = e.InitParams; if(parameters == null) { // 没有参数传递时，打开默认的 xaml this.RootVisual = new DefaultPage(); } else if(parameters["PageName"] == "Page1") { this.RootVisual = new Page1(); } else if(parameters["PageName"] == "Page2") { this.RootVisual = new Page2(); } else { //打开默认的 xaml this.RootVisual = new DefaultPage(); } }
第十八章 在 Silverlight 布局控件
在 Silverlight 中提供了 3 种类型的布局面板。Grid 控件是其中的一种。 Silverlight 提供的 3 种类型的布局面板： 1. Canvas – 绝对定位子元素 x，y 的位置。 2. StackPanel – 子元素按行或者列来进行页面布局。 3. Grid – 子元素放在行列表格中进行布局。 创建每一个 xaml 页面时必须添加一个布局面板。所有其他 UI 元素必须放在布局面板中。 每个页面需要一个确切的布局面板控件。
Silverlight 中的布局面板控件 - Canvas
Silverlight 提供了 3 种面板控件用来定义页面布局和在页面中控件的位置。 Canvas 是 布局控件之一。 Canvas 定义了一个区域，你通过制定 x 和 y 坐标的位置放置其他的控件。这样在 Canvas 中可能重叠多个控件。与通常的 HTML 相反，当控件在 Canvas 重叠时，被重叠控件可以被 其他控件隐藏。 当控件放置在 Canvas 中，使用 Canvas.Left 和 Canvas.Top 属性为每个控件指定那个 x 和 y 坐标。 此示例演示在 Canvas 中放置矩形控件并制定 x 和 y 坐标：
~ 15 ~
程序员之家

<Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="25&q
uot; Canvas.Top="40" Fill="green" Width="100" Height="100" /> </Canvas>
上面的 xaml 标签定义了矩形， 填充绿色

资料,教程,编程,文集

大小为 100×100 像素。 这个矩形放置在离 Canvas 左边 25 像素，离 Canvas 顶端 40 像素。 下面例子演示 3 个矩形相互重叠：
<Canvas Width="500" Height="500" Background="White"> <Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100" Height="100" /> <Rectangle Canvas.Left="50" Canvas.Top="65" Fill="yellow" Width="100" Height="100" /> <Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100" Height="100" /> </Canvas>
下面图形是输出的样子：
Silverlight 中的布局面板控件 - StackPanel
StackPanel 支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排 列显示，如下面的 XAML 声明三个矩形：
<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
~ 16 ~
程序员之家

<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
运行后在界面显示效果如下：
当然我们也可以指定为水平排列，通过 Orientation 属性指定：
<Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/> <Rectangle Fill="#0099FF" Stroke="White" Width="100" Height="50" Margin="10"/>
运行后界面显示效果如下：
在这里为了让各个控件之间有一定的距离， 使用了 Margin 属性， 该属性类似于 HTML 中的 Margin。
Silverlight 中的布局面板控件 – Grid
Grid 控件类似与 HTML 中的 Table，只不过子元素不用放在单元格中。通过 <Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义 Grid 的行和列， 使用 Grid.Row 和 Grid.Column 两个附加属性指定子元素在 Grid 中显示的位置，这是 一种非常灵活的布局方式。如下面的 XAML 声明：
<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True">
~ 17 ~
程序员之家

<Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"></TextBlock> <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"></TextBlock> <TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox> <TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignm
ent="Left"></TextBox> </Grid>
定义一个两行两列的 Grid，做一个简单的用户登录的布局，为了明显起见，把 ShowGridLines 属性设为 True，以便能够显示出边框线。同时，我们指定了第一行的高 度

资料,教程,编程,文集

为 120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：
第十九章 如何在 Silverlight 控件中显示图像？
在 Silverlight 中，image 控件可以用来显示图像。用法和前面的相似。使用 Image 控 件的语法如下：
<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" > </Grid>
~ 18 ~
程序员之家

Image.Source 属性
Source 属性用于指定图片的位置。
运行结果如下图显示：
以反斜杠开头的图片（Source="/images/DingosLogo.png"）需要放在 ClientBin 目录下的相应文件夹中，如下图所示：
不以反斜杠开头的图片（Source="images/DingosLogo.png"）应该放在 Silverlight 项目的目录下的相应文件夹里。
~ 19 ~
程序员之家

反斜杠开头的相对路径，代表的相对位置是应用程序运行的根目录，即.xap 压缩包内，若 在这其中寻找不到要引用的文件，则相对路径的回退机制（fallback mechanism ）自 动在在.xap 所在的目录，即为 ClientBin 目录中寻找加以引用。两个位置都没有，才会 发生错误。不以"/"开头，则代表的相对位置是引用该图片的 XAML 文件所在的目录，即 page.xaml 文件所在的目录。
Image.stretch 属性
Stretch 属性可能有以下值： 1. None 这样不会改变 image 的大小。如果图像大小大于容器的大小，图像在容器中会被裁减以适 应容器的大小。 2. Fill 在这种情况下，图像会扩大以填充容器区域。在宽高比方面（宽度和高度比）将不能保持。 3. Uniform 这是默认值。在这种情况下，图像将根据容器的大小调整，但保持宽高比不变。因此，可能 在容器和图片周围可能有空白。 4. UniformToFill 在这种情况下，图像将改变大小并填充容器，如果需要的话宽高比将做一些微调。
~ 20 ~
程序员之家

Width 和 Height 属性
图片的宽、 高属性将覆盖 Stretch 属性。 如果指定宽、 高属性， Stretch 属性被忽略。 则
Image.Clip 属性
Image 控件的 Clip 属性在 Silverlight 中被用来确定图片部分显示和其他部分隐藏。 看下面的例子如何以椭圆的形式显示图像：
<Grid x:Name="Layout" Width="200" Height="220" Background="YELLOW" > <EllipseGeometry x:Name="Ellipse" RadiusX="100" RadiusY="100" Center="100,110"/> </Grid>
上面代码运行后呈现图像如下：
第二十章 在 Silverlight 中如何拖动或移动图像或对象？
实现鼠标 down、up 和 move 事件可以在布局面板中使用鼠标拖动或移动嵌套在 Border 控件中的图像或
对象。 看下面的.xaml 代码：
<Canvas x:Name="LayoutRoot" Background="White"> </Canvas>
在上面代码中，Border 控件放置在 Canvas 中，值得

资料,教程,编程,文集

注意的重要代码是：
MouseLeftButtonDown="border1_MouseLeftButtonDown" MouseLeftButtonUp="border1_MouseLeftButtonUp" MouseMove="border1_MouseMove"
上面代码行定义了需要处理的 3 个事件。正如其名称所示，需要处理左鼠标按下事件、左 鼠标单击并放开事件和左鼠标移动事件。 在后置代码中， 当左鼠标按下， 将设置一个全局变量用来标识用户开始移动。 在鼠标移动时， 将设置一个鼠标当前位置并为 Border 控件设置新位置。当左鼠标释放时，将重设全局变 量以便不会移动更多的对象。 看后置代码：
public partial class Page : UserControl { // 全局变量用于定义用户是否点击边框和开始/停止移动 private bool moving = false; private double offSetX; private double offSetY; public Page() { InitializeComponent(); } private void border1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // 鼠标左键编辑开始移动 moving = true; Point offset = e.GetPosition(border1);
~ 22 ~
程序员之家

offSetX = offset.X; offSetY = offset.Y; } private void border1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { // 鼠标左键释放，停止移动 moving = false; } private void border1_MouseMove(object sender, MouseEventArgs e) { if(moving) { // 得到鼠标新的位置 Canvas parent = (Canvas)this.border1.Parent; Point p = e.GetPosition(parent); double x = p.X - offSetX; double y = p.Y - offSetY; // 设置边框控件的新位置 this.border1.SetValue(Canvas.LeftProperty, x); this.border1.SetValue(Canvas.TopProperty, y); } } }
第二十一章 如何从 页面传递参数到 Silverlight 控 件？
可以从 aspx 页面和 html 页面传递参数给 Silverlight 控件。 这章介绍如何从 aspx 页 面和后置代码文件中传递参数到 Silverlight。
InitParameters
在 Xaml 页面中用户控件有一个属性叫做 InitParameters。 可以从 Aspx 页面以键-值对 的形式设置值。这个属性可以接受键-值对，可以传递任意一组 string 值。
~ 23 ~
程序员之家

如何设置 InitParameters
示例 – 从 Aspx 页面设置 InitParameters 属性：
也可以从 Aspx 页面的后置代码文件设置这个属性。 示例 – 从后置代码文件设置 InitParameters 属性：
Xaml1.InitParameters = "City=Houston,State=Texas,Country=USA";
如何检索 InitParameters 的值呢？可以通过 InitParameters 属性传递给 Silverlight 控件的值可以从 App.xaml 页面的 Application_Startup 事件中检索。
private void Application_Startup(object sender, StartupEventArgs e) { IDictionar
y parameters = e.InitParams; this.RootVisual = new Page1(); }
现在，在大多数情况下，想传递值到 xaml 页面，而不是在 App.xaml 做任何事情。
从 App.xaml 传递参数到其他页面
从 App.xaml 页

资料,教程,编程,文集

面传递参数到其他页面，需要修改 xaml 页面类的构造方法来接收参数。
private IDictionary parameters = null; public Page1() { InitializeComponent(); } public Page1(IDictionary p) { this.parameters = p; InitializeComponent(); }
上面示例显示一个附加的构造反复添加了类型为 IDictionary 的参数并为成员设置值。 现在回到 App.xaml 传递参数给页面：
private void Application_Startup(object sender, StartupEventArgs e) { IDictionary parameters = e.InitParams;
~ 24 ~
程序员之家

this.RootVisual = new Page1(parameters); }
在 XAML 页面使用 IDictionary 参数
如果你按上述步骤设置正确，你将可以在 XAML 页面访问 IDictionary 的值。
textblock1.Text = this.parameters["City"];
XAML 页面完整代码
<Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock> </Grid>
在 page1.xaml 的后置代码文件中，可以为 textblock1 控件设置文本，如下显示：
private void UserControl_Loaded(object sender, RoutedEventArgs e) { textblock1.Text = parameters["City"]; }
最终在页面上将会显示“Houston”即“City”参数的值。
第二十二章 如何从 Silverlight 控件调用 WCF 方法？
Silverlight 控件在客户端浏览器上执行。它不能直接访问服务器端的数据。因此，如果 Silverlight 控件需要从服务器上的数据库或其他数据源获取数据， 必须使用像调用 WCF 或依赖 Silverlight 控件的 InitParameters 属性等途径。 建议使用调用 WCF 方法的方式获取服务器端的数据到 Silverlight 控件。最重要的好处 是类型安全。 下面示例演示 Silverlight 控件在客户端如何使用 WCF 从服务器端获取数据。 在这个例子中， 将创建一个 Silverlight 项目和一个承载 Silverlight 控件的其他 Web 项目。此外，将在 Web 项目中添加 WCF 服务。
~ 25 ~
程序员之家

Silverlight 中使用 WCF
创建一个新的 Silverlight 项目和具有承载 Silverlight 控件 Web 项目。 打开 Visual Studio 并选择菜单“文件”-> “新建”-> “项目” 在你喜欢的语言下面选择项目类型为 “Silverlight” 并选择 “Silverlight 应用程序” 模板。这里我们选择的是 Visual C#。 为项目命名为“MySilverlightApp”并选择“为解决方案创建目录”选项因此所有项目 文件多在文件夹结构中。
在下一个对话框中，选择“为解决方案添加一个承载控件的 Web”
右键解决方案资源管理器中的 Web
项目并选择“添加新项” 。 从对话框左边面板选择“Silverlight”类别。
~ 26 ~
程序员之家

从右边面板，选择“Silverlight-enabled WCF 服务”模板。 选择默认名字“Service1.svc”并

资料,教程,编程,文集

按“添加”按钮。 可以看到如下代码：
[ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class Service1 { [OperationContract] public void DoWork() { // 在此处添加操作实现 return; } // 在此处添加更多操作并使用 [OperationContract] 标记它们 }
在这里不解释 WCF 的概念。不过想指出两件事情：
[ServiceContract(Namespace = "")]
- 类名前面的这个特性表明这个类是一个 WCF 访问。
[OperationContract]
- 方法前面的这个特性表明这个方法可以从 WCF 客户端调用。
第二十三章 Silverlight 中使用 WCF 示例
为 WCF 服务类添加一个新方法，使用[OperationContract]特性来修饰。如下添加一个 方法：
[OperationContract] public string GetName() { return "John"; }
正如你看见的，这是一个简单的方法返回一个硬编码的名字。 打开解决方案管理器。右键“Service1.svc”文件，并选择“设为起始页” 。 按 Ctrl + F5 运行应用程序（或使用菜单“调试”–>“开始执行不调试”。 ）
~ 27 ~
程序员之家

在浏览器打开 Service1 元数据并显示。 忽略页面内容， 从浏览器复制 URL。 URL 类似于：
http://localhost:1873/Service1.svc
这个端口号可能会不同。 回到 Visual Studio 的解决方案管理器。右键 Silverlight 项目（不是 Web 项目）并 选择“添加 Service 引用” 。 在地址域中，指定从浏览器中复制的 URL，点击“前往” 。 在底部左边，修改命名空间为“MySampleService” 。 将看见如下屏幕：
点击“确定”添加服务引用。 现在可以从 Silverlight 客户端调用 WCF 访问。 为了做测试，做下面几步： 1. 打开 Page1.xaml 文件并添加一个文本框用于显示从 WCF 方法返回的字符串 2. 从 UserControl 中添加“Loaded”事件。 Page1.xaml 中的完整代码如下：
~ 28 ~
程序员之家

<Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock> </Grid>
现在在后置代码中（Page1.xaml.cs）中，按如下方式添加 WCF 服务调用：
private void UserControl_Loaded(object sender, RoutedEventArgs e) { MySampleService.Service1Client client = new MySampleService.Service1Client(); client.GetNameCompleted += new EventHandler(client_GetNameCompleted); client.GetNameAsync(); } void client_GetNameCompleted(object sender, MySampleService.GetNameCompletedEventArgs e){ textblock1
.Text = (string)e.Result; }
在解决方案管理器中打开 Web 项目并设置 Silverlight 测试页为起始页。运行项目。可 以看见从 Silverlight 客户端调用 WCF 服务，并将结果显示在浏览器。 （在这个例子中， 从调用 WCF 服务返回的结果

资料,教程,编程,文集

是“John”名字并将名字显示在屏幕上） 。
第二十四章 从 Silverlight 控件访问 Session 变量
Silverlight 是客户端控件。它们执行在客户端浏览器上，他们不能直接访问服务器端的 数据。 由于 Session 存在于 Web 服务器上，Silverlight 控件不能直接方法他们。有几种方法 Silverlight 可以访问服务器端数据包括 Session 信息。 现在探讨一些从 Silverlight 控件访问 Session 信息的方案。 选择 1：将 Session 数据放到客户端以 VIEWSTATE 数据形式或 UI 控件数据形式。这样 做的缺点是数据不安全，仅能发送少量数据，数据对用户是可以见的。 选择 2：使用 Silverlight 控件的 InitParameters 属性将信息传递给 Silverlight 控件。这样的方式也有数据不安全，只有少量数据可以发送等问题。 选择 3：调用 WCF 服务从服务器检索数据。这种方式，Silverlight 控件可以调用 WCF
~ 29 ~
程序员之家

服务检索大量数据，没有上面 2 方面的缺点。 使用 WCF 从服务的获取 Session 数据到 Silverlight 控件，你需要做的是创建一个简 单的 WCF 访问。 这个服务应该有一个方法获取 Session 键值作为输入参数并返回 Session 对应的值，如下所示：
[OperationContract] public object GetSessionVariable(string key) { return System.Web.HttpContext.Current.Session[key]; }
第二十五章 创建 WCF 访问检索 Session 数据示例
创建一个新的 Silverlight 项目和具有承载 Silverlight 控件 Web 项目。 打开 Visual Studio 并选择菜单“文件”-> “新建”-> “项目” 步骤： 1. 打开 Visual Studio 并选择菜单“文件”-> “新建”-> “项目” 2. 在你喜欢的语言下面选择项目类型为“Silverlight”并选择“Silverlight 应用 程序”模板。这里我们选择的是 Visual C#。为项目命名为 “AccessSessionFromSilverlight”并选择“为解决方案创建目录”选项因此所有项 目文件多在文件夹结构中。 3. 在下一个对话框中，选择“为解决方案添加一个承载控件的 Web” 4. 在 Visual Studio 创建解决方案后，右键解决方案资源管理器中的 Web 项目并选择 “添加新项” 。 选择默认名字“Service1.svc”并按“添加”按钮。 5. 从对话框左边面板选择“Silverlight”类别。从右边面板，选择 “Silverlight-enabled WCF 服务”模板。 6. 选择默认名字“Service1.svc”并按“添加”按钮。 7. 你看到如下代码：
[ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class Service1 { [O
perationContract] public void DoWork() {
~ 30 ~
程序员之家

// 在此处添加操作实现 return; } // 在此处添加更多操作并使用 [OperationContract] 标记它

资料,教程,编程,文集

们 }
按如下显示添加新的方法：
[OperationContract] public object GetSessionVariable(string key) { return System.Web.HttpContext.Current.Session[key]; }
8. 打开解决方案资源管理器。右键“Service1.svc”文件并选择“设为起始页” 9. 按 Ctrl + F5 运行应用程序（或使用菜单“调试”–>“开始执行不调试”。 ） 在浏览器打开 Service1 元数据并显示。 忽略页面内容， 从浏览器复制 URL。 URL 类似于：
http://localhost:1873/Service1.svc
这个端口号可能会不同。 10. 回到 Visual Studio 的解决方案管理器。 右键 Silverlight 项目 （不是 Web 项目） 并选择“添加 Service 引用” 。 在地址域中，指定从浏览器中复制的 URL，点击“前往” 。 在底部左边，修改命名空间为“MySampleService” 。点击“确定”按钮添加服务引用。 现在可以从 Silverlight 客户端调用 WCF 服务。 按下面步骤测试： 1. 打开 Page1.xaml 文件并添加一个文本框用于显示从 WCF 方法返回的字符串。 2. 从 UserControl 中添加“Loaded”事件。 Page1.xaml 中的完整代码如下：
<Grid x:Name="LayoutRoot" Background="White">
~ 31 ~
程序员之家

<TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock> </Grid>
现在在后置代码中（Page1.xaml.cs）中，按如下方式添加 WCF 服务调用：
private void UserControl_Loaded(object sender, RoutedEventArgs e) { MyService.Service1Client client = new AccessSessionFromSilverlight.MyService.Service1Client(); client.GetSessionVariableCompleted += new EventHandler( client_GetSessionVariableCompleted); client.GetSessionVariableAsync("Name"); } void client_GetSessionVariableCompleted(object sender, AccessSessionFromSilverlight.MyService. GetSessionVariableCompletedEventArgs e) { if(e.Result == null) textblock1.Text = "Session variable not set"; else textblock1.Text = e.Result.ToString(); }
在解决方案资源管理器中打开 Web 项目，并设置 Silverlight 测试页面为起始页码。运 行项目。可以看到 Silverlight 客户端调用 WCF 服务的显示结果。
第二十六章 如何从 Silverlight 代码调用 Javascript 函数？
Silverlight 的一个优点是可以访问承载它的 Web 页面的 HTML 文档。 Silverlight 可 以访问 HTML 元素，因此也可以调用 Javascript 方法。 下面的步骤显示了如何在 Silverlight 中调用 JavaScript 方法。 打开承载 Silverlight 控件的 页面或 HTML 页面。添加 Javascrpit 方法， 如下所示：
打开 XAML 控件文件并添加一个按钮控件，如下所示：
<Grid x:Name="LayoutRoot" Background="White"> </Grid>
来到 XAML 页面的后台代
码文件，并添加按钮点击事件：
private void btnSayHello_Click(object sender, RoutedEventArgs e){ HtmlPage.Window.Invoke("SayHello"); }
为了使用 HtmlPage

资料,教程,编程,文集

类，必须包含 System.Windows.Browser 命名空间。
using System.Windows.Browser;
完成后，运行 Silverlight 应用程序查看结果。当点击 Silverlight 控件中的按钮， 可以看见一个从 Javascript 方法而来的弹出信息，如下图所示：
第二十七章 如何在 Silverlight 页面上弹出层？
在 xaml 页面上添加一个按钮，如下所示：
<Grid x:Name="LayoutRoot" Background="White" > </Grid>
在后置代码文件（page.xaml.cs）中添加如下代码
~ 33 ~
程序员之家

Popup p = new Popup(); private void showPopup_Click(object sender, RoutedEventArgs e) { // 创建一个 panel 控件包含其他控件 StackPanel panel1 = new StackPanel(); panel1.Background = new SolidColorBrush(Colors.Gray);
// 创建一个 button Button button1 = new Button(); button1.Content = "Close"; button1.Margin = new Thickness(5.0); button1.Click += new RoutedEventHandler(button1_Click);
// 创建文本 label TextBlock textblock1 = new TextBlock(); textblock1.Text = "The popup control"; textblock1.Margin = new Thickness(5.0);
// 添加文本 label 和 button 到 panel panel1.Children.Add(textblock1); panel1.Children.Add(button1);
// 设置 panel 为弹出层的子面板，当 panel 显示是弹出层显示 p.Child = panel1;
// 设置位置 p.VerticalOffset = 25; p.HorizontalOffset = 25;
// Show the popup. p.IsOpen = true;
~ 34 ~
程序员之家

}
void button1_Click(object sender, RoutedEventArgs e) { // 关闭弹出层 p.IsOpen = false; }
注意：需要添加 System.Windows.Controls.Primitives 命名控件的引用。 运行应用程序。可以看见页面上有一个按钮。当点击按钮时，一个具有文本标签和按钮的弹 出层会显示。当点击弹出层中按钮，将会关闭弹出层。如下图所示：
第二十八章 为 Silverlight 控件添加工具提示
Silverlight 提供了一个名为“ToolTipService”的控件用于为 Silverlight 控件 显示工具提示。 这个类可以附着在 Silverlight 中的大多数 UI 元素上用于显示工具提示。
简单的文本提示
下面的示例代码显示如何为一个按钮控件添加工具提示：
<ToolTipService.ToolTip> <ToolTip Content="This is tool tip for Button"></ToolTip> </ToolTipService.ToolTip>
效果如下图显示：
看下面的示例用于为文本框控件设置工具提示：
<TextBlock Width="60" Height="20" Text="My Text">
~ 35 ~
程序员之家

<ToolTipService.ToolTip> <ToolTip Content="This is tool tip for TextBlock"></ToolTip&g
t; </ToolTipService.ToolTip> </TextBlock>
效果如下图显示：
显示富 UI 元素提示
Silverlight 在工具提示时支持 UI 元素，使用户得到更好的体验。在工具提示时可以使 用更多的 UI 元素。看下面显示的例

资料,教程,编程,文集

子 在提示工具中显示图像 示例代码显示在 Silverlight 中如何显示图像工具提示：
<TextBox Width="60" Height="20" Text="My Text"> <ToolTipService.ToolTip> </ToolTipService.ToolTip> </TextBox>
效果如下图显示：
为整个 Silverlight 控件进行提示 可以为整个 Silverlight 工具设置提示。看如下代码：
<ToolTipService.ToolTip> <ToolTip Content="This is tool tip for entire control"></ToolTip> </ToolTipService.ToolTip>
鼠标放在 Silverlight 控件的任何位置都会显示如下：
编程方式设置工具提示
可以从后台代码文件设置或改变工具提示。 下面例子显示如何从后台代码文件为按钮控件设 置文本提示：
ToolTipService.SetToolTip(MyButton, "This is new tooltip");
第二十九章 如何在 Silverlight 播放音频或声音文件？
Silverlight 提供了一个名为 MediaElement 的类用来播放音频或视频文件。 Silverlight 中的 MediaElement 支持播放 MP3 和 WMV 格式的视频/音频文件。现在 Silverlight 当前版本不支持播放.WAV 和.AVI 格式的文件。 如果尝试使用 MediaElement 控件播放.WAV 或.AVI 文件，将收到以下错误： Error: Unhandled Error in Silverlight 2 Application Code: 3001 Category: MediaError Message: AG_E_INVALID_FILE_FORMAT 为了播放.MP3 或.WMV 文件，首先比较将这些文件包含在 Silverlight 项目中，然后设 置它作为嵌入资源。 为了使视频文件作为嵌入资源， 将视频文件添加到项目中， 右键项目中的视频文件并选择 “属 性”页。设置“生成操作”为“嵌入的资源” 。这样编译时视频文件会嵌入到.xap 文件中。 将视频文件作为嵌入资源后，可以在 XAML 中定义 MediaElement 对象编写代码来播放文 件。下面示例代码演示播放视频文件：
MediaElement media = new MediaElement(); Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(
~ 37 ~
程序员之家

"MyNamespace.Sound1.wav"); media.SetSource(stream); media.AutoPlay = false; media.Stop(); media.Play();
代码分析：
Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream( "MyNamespace.Sound1.wav");
上面的代码行从可执行程序集捕获视频流。 记住这个视频文件时通过设置 “生成操作” “嵌 为 入的资源”嵌入在程序集中的。 在上面代码中， “MyNamespace”表示应用程序的命名空间。 “Sound1.wav”是视频的文 明名， 假设这个文件在应用程序的根目录。 如果文件在子目录， 也需要包括目录名， “.”
用 号隔开。
media.SetSource(stream);
上面的代码行，设置了播放媒体的源。
media.AutoPlay = false;
上面的代码行，表示播放器不能自动播放媒体，只有点击了开始才会播放。
media.Stop(); media.Play();
上面

资料,教程,编程,文集

的 diamond 行，可以看到在.Play()之前做了.Stop()。这个停止仅在你多次播放 相同的 MediaElement 时才需要。
第三十章 在 Silverlight 中如何显示右键菜单？
当右键 Web 页面中 Silverlight 控件的任何地方，会显示一个默认的 Silverlight 右 键菜单 – 简单的 Silverlight 配置项。可以拦截这个右键菜单并显示自己的菜单。 需要做的第一步是，在承载 Silverlight 控件的 aspx 页面中设置 xaml 元素的 “Windowless”属性为“True” 。
现在，可以在 xaml 页面中设置浏览器文档对象的“AttachEvent”属性并为 “oncontextmenu”事件附加需要执行的事件操作。
~ 38 ~
程序员之家

示例代码：
System.Windows.Browser.HtmlPage.Document.AttachEvent("oncontextmenu", this.OnContextMenu);
可以在 XAML 页面的构造方法中附加你要执行的事件操作。甚至可以从 App.xaml 的构造 方法中执行，这样在项目中的每个 xaml 页面都会触发这个事件处理。 下面是事件处理代码：
private void OnContextMenu(object sender, System.Windows.Browser.HtmlEventArgs e) { MessageBox.Show("You clicked at " + e.OffsetX + "," + e.OffsetY); e.PreventDefault(); }
上面的示例代码显示点击位置的坐标。如下图所示：
你可以在代码中显示自己的菜单或弹出窗口。代码“e.PreventDefault();”放置事件 传递到其他子控件。
第三十一章 介绍 Silverlight 绑定数据
数据绑定可以动态的将对象属性绑定到 Silverlight 中 UI 控件的属性中。 例如，一个简单的 Silverlight 控件用于接收用户的名字和地址。可以创建一个 xaml 控件具有以下文本字段： 1. Name 2. Address1 3. Address2 4. City 5. State 6. Zip code 在这里 XAML 中都有一个 Grid 用于摆放示例中的控件：
<Grid x:Name="LayoutRoot" Background="AliceBlue" Width="300" Height="300">
~ 39 ~
程序员之家

<Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition Width="200"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="Name" Grid.Row="0" Grid.Column="0"></TextBlock> <TextBlock Text="Address 1" Grid.Row="1" Grid.Column="0"></TextBlock> <TextBlock Text="Address 2" Grid.Row="2" Grid.Column="0"></TextBlock> <TextBlock Text="City" Grid.Row="3" Grid.C
olumn="0"></TextBlock> <TextBlock Text="State" Grid.Row="4" Grid.Column="0"></TextBloc

资料,教程,编程,文集

k> <TextBlock Text="Zipcode" Grid.Row="5" Grid.Column="0"></TextBlock> <TextBox x:Name="txtName" Text="{Binding Name, Mode=TwoWay}" Grid.Row="0" Grid.Column="1" Height="20" Width="100"></TextBox> <TextBox x:Name="txtAddress1" Text="{Binding Address1, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Height="20" Width="100"></TextBox> <TextBox x:Name="txtAddress2" Text="{Binding Address2, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Height="20" Width="100"></TextBox> <TextBox x:Name="txtCity" Text="{Binding City, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Height="20" Width="100"></TextBox> <TextBox x:Name="txtState" Text="{Binding State, Mode=TwoWay}" Grid.Row="4"
~ 40 ~
程序员之家

Grid.Column="1" Height="20" Width="100"></TextBox> <TextBox x:Name="txtZipcode" Text="{Binding Zipcode, Mode=TwoWay}" Grid.Row="5" Grid.Column="1" Height="20" Width="100"></TextBox> </Grid>
在上面的 XAML 定义了一个 7 行 2 列的网格。这些控件通过使用各自的 Grid.Row 和 Grid.Column 属性防止合适的行、列中。当 Silverlight 控件放在 Web 页面显示如下 所示：
现在创建一个名为“Address”的类，它的各个属性表示我们需要的域。看“Address” 类的示例代码：
public class Address { public string Name { get; set; } public string Address1 { get; set; } public string Address2 { get; set; } public string City { get; set; } public string State { get; set; } public string Zipcode { get; set; } }
转到 XAML 类的后台代码文件，按如下方式创建一个 Address 类的实例：
Address address;
在 XAML 页面类的构造方法中，初始化 Address 类，按如下方式绑定到 UI 元素：
address = new Address();
~ 41 ~
程序员之家

txtName.DataContext = address; txtAddress1.DataContext = address; txtAddress2.DataContext = address; txtCity.DataContext = address; txtState.DataContext = address; txtZipcode.DataContext = address;
在上面代码中，将“Address”对象设置到每个 UI 控件的 DataContext 属性。但是，如 何控制使用的每个 address 对象的属性呢？这在 XAML 中处理。 看一看 “txtAddress1” 控件。可以看到“Text”属性按如下设置：
Text="{Binding Address1, Mode=TwoWay}
上面代码行大运了使用数据绑定为控件的“Text”属性赋值，它无论哪个对象都绑定在 “Address1”属性。此外，状态模式为“TwoWay” ，表示这个值可以从对象读取，也可以 设置“Text”属
性当文本框控件中的值发生改变时，会保存回数据源。在这个例子中，绑 定 Address 对象到文本框控件。当加载时，将显示对象的默认值到文本框。当用户改变值 后，数据源对象将从文本框中更新值。 通常，我们添加一个新地址，这个对象将初始化为空值且文本框为清空。当我们编译一个已 存在的地址，这

资料,教程,编程,文集

个对象将从数据库中填充值并使用数据绑定显示在 UI 控件。当用户改变值 时，数据源对象将自动更改。我们所需要做的是，保存修改的数据源对象到数据库。
第三十二章 Silverlight 数据绑定示例：BindingMode 枚举
DataBindingMode 是一个枚举具有 3 个可能值： l OneTime: 在这种模式下，数据从源到目标（UI）仅更新一次。在此之后数据源的任 何改变都不会反映到 UI。这种模式被用来显示静态数据不需要经常改变。 OneWay: 在这种模式下，当数据源改变时目标也会改变。如果需要显示的数据经常在 后台变化是会有用。 TwoWay: 正如名字所示，这种模式的更新方式有两种。当数据源改变时，目标也被改 变。当目标的值改变时，数据源也会改变。
l
l
为了支持 “OneWay” “TwoWay” 和 模式， 绑定数据源必须执行 InotifyPropertyChanged 接口，此外，数据源的属性必须触发 PropertyChanged 事件，以便绑定数据触发时将通 知数据源事件。没有这一点，后台数据源改变不会修改绑定目标源。 下面是一个示例 - 数据源 Address 类的源代码，可以用于绑定 UI 控件：
using ponentModel; namespace DataBinding_Address { public class Address : INotifyPropertyChanged {
~ 42 ~
程序员之家

public event PropertyChangedEventHandler PropertyChanged; private string _name = ""; public string Name { get { return _name; } set { _name = value; if(PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("Name")); } } } } }
在上面代码仅包含一个属性（Name） 。可以扩展类添加其他属性像 City，State 等。 上面的代码显示当对象的 Name 发生改变时触发 PropertyChanged 事件。将通知绑定控 件目标控件的改变及改变有的值。 这个示例项目中使用名为“Address”的类作物数据源。每个 address 对象的属性绑定到 UI 的文本框控件使用“TwoWay”模式。当用户在 UI 控件输入任何文本信息，作为数据源 的 address 对象会改变。同样，如果 address 对象在后台改变是，UI 也会自动更新。 UI 中包含一个“清除”按钮。在此按钮的单击事件中，将重置 address 对象的每个属性 为空字符串。
private void btnClear_Click(object sender, RoutedEventArgs e) { = string.Empty; address.Address1 = string.Empty; address.Address2 = string.Empty; address.City = string.Empty; address.State = string.Empty; address.Zipcode = string.Empty; }
通过“TwoWay”方式数据绑
定，将自动清除各种 UI 控件中的文本内容。
~ 43 ~
程序员之家

第三十三章 如何为 Siverlight 控件设置背景图片
在 Silverlight 中，ImageBrush 元素可以用图片来填充区域。这个区域可以是各种

资料,教程,编程,文集

形 状元素，也可以是整个画布本身。 此示例代码显示如何使用 ImageBrush 为 Silverlight 中的 Canvas 控件设置背景图片。
<Canvas x:Name="SnowCanvas" Width="600" Height="480"> <Canvas.Background> </Canvas.Background> </Canvas>
下面的示例显示如何使用图片填充椭圆区域。 此外， 还是用 MouseEnter 和 MouseLeaver 事件动态改变椭圆区域的填充图像。
<Ellipse x:Name="ellipse1" MouseEnter="ellipse1_MouseEnter" MouseLeave="ellipse1_MouseLeave" Width="100" Height="100"> <Ellipse.Fill> </Ellipse.Fill> </Ellipse>
下面是 C#代码执行 MouseEnter 和 MouseLeave 事件，在事件中动态改变图片：
private void ellipse1_MouseEnter(object sender, MouseEventArgs e) { ImageBrush brush = new ImageBrush(); brush.ImageSource = new BitmapImage(new Uri(@"Images/Flower1.png", UriKind.Relative)); ellipse1.Fill = brush; } private void ellipse1_MouseLeave(object sender, MouseEventArgs e) {
~ 44 ~
程序员之家

ImageBrush brush = new ImageBrush(); brush.ImageSource = new BitmapImage(new Uri(@"Images/Flower2.png", UriKind.Relative)); ellipse1.Fill = brush; }
第三十四章 Javascript 检测是否安装了 Silverlight
当前版本的 Internet Explorer 视 Silverlight 作为一种 ActiveX 控件。因此，为 了确定是否安装了 Silverlight，可以尝试使用 Javascript 创建这个 ActiveX。如果 创建 ActiveX 控件失败，可以认为 Silverlight 没有安装。 对于其他浏览器像 Chrome，Ne
tscape，FireFox，Safari 等，可以通过观察浏览器对 象数组的 Silverlight 插件来确定。Silverlight 插件安装后名为“Silverlight Plug-In” 。 下面示例代码显示如何确定客户端浏览器是否安装 Silverlight。
~ 46 ~

本文来源：https://www.bwwdw.com/article/j6re.html