Sliverlight教程Word版

Silverlight教程第一部分： 使用Silverlight 2 和 VS 2008创建“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应用项目，或者还要加一个服务器端的ASP.NET Web项目到包含Silverlight应用的解决方案里去： 推荐精选在这个例程里，我们将选择还要添加一个ASP.NET Web Application 项目到解决方案里去，并将它命名为“DiggSample_WebServer”。在点击OK之后，Visual Studio 会为我们创建一个解决方案，里面包含一个Silverlight 客户端应用和一个ASP.NET web 服务器端应用： 如果我们做一次编译的话， Visual Studio 会自动把编译好的 Silverlight 应用拷贝到我们的web服务器项目中去，不需要手工的步骤或配置。VS为我们创建的默认的web服务器项目包含一个ASP.NET网页和一个静态的 HTML网页，我们可以用来运行和测试其中的Silverlight应用。 推荐精选注： Silverlight应用可用于任何web服务器（包括Linux上的Apache），宿主于静态HTML文件或者任何服务器端生成的网页（包括 PHP, Java, Python, Ruby等等）中。在这个Digg样例中，我们不会写任何服务器端的代码，而是将使用Silverlight的跨域networking功能，来直接访问 Digg服务的API。我选择创建一个ASP.NET 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 应用，你可以把<object>标签加到任何标准的HTML页面中（不需要 JavaScript ）并将其指向 .xap 文件。Silverlight然后就会自动下载这个.xap 文件，生成实例，将其宿主于浏览器中的HTML网页中。这是跨浏览器（Safari, FireFox, IE等），跨平台（Windows, Mac, and Linux）工作的。HTML和ASP.NET测试网页（内含<object>标签，其引用指向我们的Silverlight 应用）是在我们创建项目时为我们自动添加的，这意味着我们只要点击F5编译，运行和测试就可以了。 学习如何添加控件和处理事件现在我们的Digg应用什么都不做，在运行它时，只会调出一个空白的网页。我们可以打开项目中的Page.xaml文件来改变它，往里面加些内容：推荐精选我们将开始改变网格的背景颜色，在其中声明一个Button控件。我们将给按钮一个"x:Name"属性，设置其值为“MyButton“，这会允许我们在后台代码类中用编程的方法引用它。我们还将设置它的Content, Width 和 Height 属性： 推荐精选当我们运行应用时，我们的按钮将会在网页的中间出现，内含”Push Me“内容文字，象下面这样：   要给我们的按钮加行为的话，我们可以给它加一个"Click"事件处理函数。我们可以在源码视图中通过输入事件的名称来做：然后就会提示我们在我们的后台代码类中该使用的事件处理函数：推荐精选然后我们可以输入一个要用的新事件处理方法的名称，或者只要点击回车键，使用默认的命名约定来命名事件处理方法：然后VS就会自动地在我们的后台代码类文件中创建一个占位的事件处理函数实现。我们可以使用这个事件处理函数在按钮被点击时，用新的消息更新它的内容： 在做完上面的改动后，我们可以重新运行应用，再次点击按钮，现在它的内容就会被更新为“Pushed!”的消息：推荐精选 以下的步骤在完成我们的应用之前，我们还有不少工作要做. :-) 下一步，是配置我们的应用的总的UI布局结构，在其中安排更多的控件。 要做那个，就让我们跳到下一个教程使用布局管理。 Silverlight 教程第二部分：使用布局管理 (木野狐译) · 3 ·【原文地址】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.RowDefinitions> 和 <Grid.ColumnDefinitions> 属性来定义 Grid 的行和列。这两个属性需要定义在 <Grid> 标签内。这样之后，你就可以在其中的控件上，用 XAML 的“附加属性”语法指定它属于哪一行、哪一列。 比如，我们可以用如下语法定义3行3列的 Grid 布局，然后在其中放置4个按钮： 推荐精选以上代码会按下图方式排布按钮：除了支持绝对尺寸定义（如：Height="60"），Grid 的 RowDefinition 和 ColumnDefinition 控件还支持自动改变大小的模式（Height="Auto"），这样会根据其中内容的尺寸自动改变 Grid 或 Row 的尺寸（你也可以指定最大或最小尺寸限制）。 推荐精选Grid 的 Row 和 ColumnDefinitions 还支持叫做 "Proportional Sizing" （按比例缩放）的特性。用这个特性，可以让 Grid 的行列按相对比例