当前位置：文档之家› Silverlight教学

Silverlight教学

创建“Hello World”程序

这是8个系列教程的第一部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。

使用VS 2008 创建一个新的Silverlight 应用

我们来开始我们的Digg应用的开发，先选择Visual Studio 2008 中的文件->新项目菜单项，使用新项目对话框创建一个“Silverlight Application” （注：你需要在Beta1发布后，下载和安装VS 2008的Silverlight工具才能得到这个支持）：

我们将该项目命名为“DiggSample”。在点击OK按钮后，Visual Studio 会显示另外一个对话框，允许我们选择我们是否只要创建一个Silverlight应用项目，或者还要加一个服务器端的https://www.doczj.com/doc/ae10435317.html, Web项目到包含Silverlight应用的解决方案里去：

在这个例程里，我们将选择还要添加一个https://www.doczj.com/doc/ae10435317.html, Web Application 项目到解决方案里去，并将它命名为“DiggSample_WebServer”。在点击OK之后，Visual Studio 会为我们创建一个解决方案，里面包含一个Silverlight 客户端应用和一个https://www.doczj.com/doc/ae10435317.html, web 服务器端应用：

如果我们做一次编译的话，Visual Studio 会自动把编译好的Silverlight 应用拷贝到我们的web服务器项目中去，不需要手工的步骤或配置。VS为我们创建的默认的web服务器项目包含一个https://www.doczj.com/doc/ae10435317.html,网页和一个静态的HTML网页，我们可以用来运行和测试其中的Silverlight应用。

注：Silverlight应用可用于任何web服务器（包括Linux上的Apache），宿主于静态HTML文件或者任何服务器端生成的网页（包括PHP, Java, Python, Ruby等等）中。在这个Digg样例中，我们不会写任何服务器端的代码，而是将使用Silverlight的跨域networking功能，来直接访问Digg服务的API。我选择创建一个https://www.doczj.com/doc/ae10435317.html, web服务器项目，主要是想获得自动的部署，并且使用它内置的web服务器来做测试。

理解Silverlight应用里都有些什么

在默认情形下，一个新建的Silverlight应用项目包含一个Page.xaml和一个App.xaml文件，以及与它们相关的后台（code behind ）类文件（可以用VB, C#, Ruby 或Python来编写）：

XAML文件是XML文本文件，可以用来用声明的方式指定Silverlight 或 WPF 应用的用户界面。XAML还可更广泛地用来用声明的方式代表.NET对象。App.xaml 文件一般用来声明譬如象画刷和样式对象这样可在整个应用中共享的资源。App.xaml的后台Application类可用来处理应用级的事件，象Application_Startup, Application_Exit 和

Application_UnhandledException。

Page.xaml 文件，在默认情形下，是在应用激活时装载的起始的UI控件。在其中，我们可以使用UI控件来定义我们的用户界面，然后在Page的后台代码类里处理它们的事件（详见后文）。

在我们编译DiggSample项目时，在默认情形下，Visual Studio 会把代码和XAML标识编译进一个标准的 .NET 程序集文件中，然后把它和任何静态的资源（象图片或我们想要包含的静态文件）包装进硬盘上一个叫做“DiggSample.xap”的文件中去：

“.xap”文件（其音发作“zap”）使用标准的 .zip压缩算法来减小客户端下载的大小。一个“hello world”.NET Silverlight 应用（用VB或C#编写的）其大小大概为4KB。

注：Beta1版本中的一些控件是在程序集中实现的，如果使用这些控件的话，这些程序集会重新发布于应用的 .xap 文件中（会增加应用的大小，超出4KB 的基底大小）。在Digg应用中使用的所有控件将会在Beta2版和最终版的核心Silverlight下载包中，这意味着完成的应用的总下载大小大概只在6-8KB 范围内（所以是非常小，下载起来非常快）。

要宿主和运行一个Silverlight 2 应用，你可以把标签加到任何标准的HTML页面中（不需要JavaScript ）并将其指向 .xap 文件。Silverlight 然后就会自动下载这个.xap 文件，生成实例，将其宿主于浏览器中的HTML网页中。这是跨浏览器（Safari, FireFox, IE等），跨平台（Windows, Mac, and Linux）工作的。

HTML和https://www.doczj.com/doc/ae10435317.html,测试网页（内含标签，其引用指向我们的Silverlight 应用）是在我们创建项目时为我们自动添加的，这意味着我们只要点击F5编译，运行和测试就可以了。

学习如何添加控件和处理事件

现在我们的Digg应用什么都不做，在运行它时，只会调出一个空白的网页。

我们可以打开项目中的Page.xaml文件来改变它，往里面加些内容：

我们将开始改变网格的背景颜色，在其中声明一个Button控件。我们将给按钮一个"x:Name"属性，设置其值为“MyButton“，这会允许我们在后台代码类中用编程的方法引用它。我们还将设置它的Content, Width 和Height 属性：

当我们运行应用时，我们的按钮将会在网页的中间出现，内含”Push Me“内容文字，象下面这样：

要给我们的按钮加行为的话，我们可以给它加一个"Click"事件处理函数。我们可以在源码视图中通过输入事件的名称来做：

然后就会提示我们在我们的后台代码类中该使用的事件处理函数：

然后我们可以输入一个要用的新事件处理方法的名称，或者只要点击回车键，使用默认的命名约定来命名事件处理方法：

然后VS就会自动地在我们的后台代码类文件中创建一个占位的事件处理函数实现。我们可以使用这个事件处理函数在按钮被点击时，用新的消息更新它的内容：

在做完上面的改动后，我们可以重新运行应用，再次点击按钮，现在它的内容就会被更新为“Pushed!”的消息：

Silverlight 教程第二部分：使用布局管理(木野狐译)

【原文地址】Silverlight Tutorial Part 2: Using Layout Management 【原文发表日期】Friday, February 22, 2008 5:55 AM

这是8个系列教程的第2部分，这个系列示范如何使用Silverlight 2 的Beta1 版本来创建一个简单的Digg 客户端应用。这些教程请依次阅读，将有助于您理解Silverlight 的一些核心编程概念。

理解布局管理

Silverlight 和 WPF 都支持一种灵活的布局管理系统，能让开发者和设计师轻松的定位UI 上的控件。该布局系统对显式指定坐标的控件支持固定的定位模型；除此之外，还支持一种更为动态的定位模型，控件和布局能随着浏览器的大小改变而自动改变其大小和方位。

在Silverlight 和 WPF 中，开发者可以用布局面板来协调包含在其中的控件的位置和大小。Silverlight Beta1 中内建的布局面板包括在 WPF 中最常用的3种：

Canvas

?StackPanel

?Grid

Canvas面板

Canvas 面板是一种很基础的布局面板，它支持对其中的控件采用绝对坐标定位。

你可以通过一种XAML 特性--- "附加属性” 对Canvas 中的元素进行定位。用附加属性，你可以指定控件相对于其直接父Canvas 控件的上、下、左、右坐标的位置。附加属性很有用，因为它让父面板可以扩展其中包含的控件的属性集。Canvas 通过定义扩展属性Top 和Left, 就能定义其中Button （或其他任何UI 元素）的Left, Top，而不需要真正向Button 类中添加这个属性，或修改Button 类。

我们可以向Canvas 容器中添加两个按钮，指定其距离Canvas 左侧的距离为50 像素，离上边的距离则分别为50 像素和150 像素。使用如下XAML 语法即可完成（其中Canvas.Top 和Canvas.Left 都是附加属性的例子）：

这些代码绘制的界面效果如下：

Canvas 适用于其中包含的UI 元素比较固定的情形，但是如果你想向其中添加更多的控件，或者UI 需要改变大小或能够移动，Canvas 显得不太灵活。这时，你不得不忙于手写代码来移动Canvas 中的东西（这很痛苦）。应付这种动态的场景，更好的办法通常是使用其它带有相关功能的内建语义的布局面板，如StackPanel 和Grid。

StackPanel

StackPanel 是一种简单的布局面板，它支持用行或列的方式来定位其中包含的控件。StackPanel 常用于安排页面上的一个很小的UI 部分。

例如，我们可以用下面的XAML 标签在页面上垂直的排布3个按钮：

在运行时刻，StackPanel 会自动在一个垂直地堆叠（stack）中排列我们的按钮（【译注：这也是为什么叫StackPanel 的原因】），如下所示：

同样，我们还可以把Orientation 属性设置为Horizontal 而不是Vertical （默认值）：

这会让StackPanel 水平地排布3个按钮，如下图所示：

Grid面板

Grid 控件是最灵活的布局面板，它支持用多行和多列的方式排布控件。在概念上，它和HTML 里的Table （表格）类似。

不同于Table 的是，你不需要将控件内嵌到行/列元素中，而是通过定义

和 属性来定义Grid 的行和列。这两个属性需要定义在 标签内。这样之后，你就可以在其中的控件上，用XAML 的“附加属性”语法指定它属于哪一行、哪一列。比如，我们可以用如下语法定义3行3列的Grid 布局，然后在其中放置4个按钮：

以上代码会按下图方式排布按钮：

除了支持绝对尺寸定义（如：Height="60"），Grid 的RowDefinition 和ColumnDefinition 控件还支持自动改变大小的模式（Height="Auto"），这

样会根据其中内容的尺寸自动改变Grid 或Row 的尺寸（你也可以指定最大或最小尺寸限制）。

Grid 的Row 和ColumnDefinitions 还支持叫做"Proportional Sizing" （按比例缩放）的特性。用这个特性，可以让Grid 的行列按相对比例的方式排放（如：你可以指定第二行的尺寸为第一行的2倍）。

你会发现Grid 提供了非常多的功能和灵活性- 而它也许会成为你最终最常用的布局面板控件。

用布局面板排布我们的Digg 页面

我们创建Digg 例子的目标，是得到最终看起来像下图的页面：

要创建这种布局，我们首先添加一个其中包含两个RowDefinition 的根级Grid 面板。第一行的高度是40 像素，而第二行则占据所有剩下的空间（Height="*"）：

小技巧：注意上面我将Grid 的ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线：

接下来，我们在刚才的根级Grid 面板里，添加第二个Grid 面板到第一行的位置，用它来排布页面顶部的行（页面头部）。我们在其中创建3列：分别容纳标题，搜索文本框，和搜索按钮：

完成了这些后，我们就得到了Digg 搜索页面的基本布局，如下所示：

注：如果不用嵌套的Grid，我们还可以用一个2行3列的Grid 来完成这个布局，配合使用Grid 的ColSpan/RowSpan 特性来合并多个列中的内容（和你在HTML table 中的做法类似）。我不这么做，而是选择使用嵌套Grid 的原因，是因为这样更便于学习和理解。

现在我们已经完成了布局，接下来要做的是向其中添加控件。

对头部的行，我们用内建的 控件（设置其CornerRadius 为10，以得到圆角效果）并在其中添加一些文本来创建标题。我们用内建的

控件来创建第二列的搜索文本框。并在第3列放置一个搜索