Silverlight教程第一部分.doc

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 教程第二部分：使用布局管理这是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。 Silverlight教程第三部分：使用 Networking取回数据并填充DataGrid 这是8个系列教程的第三部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。使用Networking取回Digg故事Silverlight 2 有内置的networking API，允许Silverlight客户端调用远程的REST, SOAP/WS*, RSS, JSON和XML HTTP服务。Silverlight 2还包含了内置的socket API （System.Net.Sockets），允许Silverlight客户端通过非HTTP协议来通信（对聊天服务等这样的场景非常理想）。 跨域网络访问Silverlight 2应用在做网络调用时，始终可以回调到它们的“原始（origin）”服务器（意味着它们可以调用下载的应用来自的同域的URL）。Silverlight 2应用还可以做跨域网络调用（意味着它们可以调用与下载的应用来自的不同的域上的URL），只要远程的web服务器拥有一个XML策略文件，表明客户端是允许做这些跨域调用的。 Silverlight 2 定义了一个XML策略文件格式，允许服务器管理员精确地控制一个客户端应该有些什么访问权。Silverlight 2 也遵守默认的Flash跨域策略文件格式-这意味着你可以使用Silverlight 2 来调用web上已经允许Flash客户端跨域访问的任何现有的远程REST, SOAP/WS*, RSS, JSON 或 XML 端点（end-point ）。 D有一套非常酷的通过HTTP通信的Digg APIs。因为他们有一个Flash跨域策略文件在他们的服务器上，我们可以直接从我们的Silverlight Digg 客户端应用中调用它们（而不要求我们通过我们的web服务器去访问他们的API）。 D 主题 Feed API我们要允许终端用户使用我们的应用输入一个搜索主题（譬如，“Programming”），然后点击“搜索”按钮，从D取回符合条件的前N条故事： 我们可以使用D List Stories REST API feed API 来实现。它在URL中接受一个主题参数（譬如，GET /stories/topic/programming），然后返回一个匹配那个主题的XML格式的Digg故事集。点击这里看一下这个XML格式的例子。 Silverlight教程第四部分：使用 Style 元素更好地封装观感这是8个系列教程的第4部分，这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用。这些教程请依次阅读，将有助于您理解 Silverlight 的一些核心编程概念。使用 Style 元素更好地封装观感（Look and Feel）WPF 和 Silverlight 支持一种 Style 机制，它允许我们把控件的属性值封装成可重用的资源。我们可以把这些样式声明保存在独立于页面的其他文件中，然后就可以在一个应用程序中跨控件和页面重用（甚至跨多个应用程序重用）。在做一些基本定制的场景下，概念上类似于在 HTML 中重用 CSS. 注：除了定义基本属性设置（Color, Font, Size, Margins 等），WPF 和 Silverlight 里的样式还可以被用来定义和重用控件模板(Control Templates) - 控件模板可以带来超级丰富的皮肤功能，以及改变控件结构的功能（并支持目前 HTML 中的 CSS 做不到的定制场景）。我会在这个系列的第7部分讨论控件模板。对我们的 Digg 例程而言，我们会在项目的 App.xaml 文件中定义样式。这使得该样式可以在整个应用程序中，被跨页面、跨控件地重用： 首先让我们来为 Digg 页面的 控件（以及其中的 标题）封装样式：我们可以在 App.xaml 文件中，用下列标签来创建两个 Style 元素，分别封装 和 的设置信息，这些设置在前面是内联定义的：点击放大注意上述代码中，我们是如何为每个 Style 元素赋予一个唯一的 Key 值的。接下来我们就可以更新我们的 和 控件，让它们用这些 keys 来引用对应的样式定义。我们会使用一种叫做“标签扩展”(markup extensions) 的 XAML 特性来完成它。标签扩展用于非字面量的值需要被设置时（另一个适用场景是绑定表达式）。 我们还可以对 Page.xaml 文件中的其它控件也做类似的分离样式的处理，这样做之后，文件内容会变成类似这样：点击放大用这种方式封装样式设定，可以让开发者更好的关注应用程序的行为语义，并且还可以让我们跨控件/页面的重用样式。注：Beta1 中需要注意的一个问题是，当你输错样式名称和属性定义时，其错误信息不是很清楚（它会引发异常，但不告诉哪里设置不对）。这会在 Beta2 中得到改进。同时，如果你在加载样式时看到错误消息，请一定仔细查看拼写错误。 下一步现在我们已经通过 Style 引用，将 Page.xaml 文件中的标签进行了一定的清理。让我们更进一步来自定义我们的故事数据的外观。您可以跳到下一篇教程以了解具体方法： 使用 ListBox 和 Databinding 来显示列表数据。Silverlight 教程第五部分：用 ListBox 和 DataBinding 显示列表数据这是8个系列教程的第5部分，这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用。这些教程请依次阅读，将有助于您理解 Silverlight 的一些核心编程概念。用 ListBox 和 DataBinding 显示我们的 Digg 故事前面我们使用了 DataGrid 控件来显示我们的 Digg 故事。当我们想用多列的格式来显示内容时，它很适合。然而对我们的 Digg 应用程序而言，也许我们想稍微改变一下页面的显示方式，让它看起来不太像网格，而更像一个列表。好消息是，这很容易实现 - 并且我们不需要改变任何程序代码。首先我们将 DataGrid 控件替换为 控件。我们保持原有的控件名称 (StoriesList)：重新运行一下程序，搜索故事，ListBox 会显示搜索结果如下：你可能觉得奇怪 - 为什么每个条目都变成了 DiggSample.DiggStory? 这是因为我们把 DiggStory 对象绑定给了 ListBox（而绑定的默认行为会调用这些对象的 ToString() 方法）。如果我们想改用每个 DiggStory 对象的 Title 属性来显示条目，可以设置 ListBox 的 DisplayMemberPath 属性：这样做之后的效果如下：如果要每次显示不止一个值，或者定制每个条目的布局，我们可以覆盖 ListBox 控件的 ItemTemplate，并提供一个自定义的 DataTemplate. 然后在这个 DataTemplate 内，定制每个 DiggStory 对象如何显示。Silverlight教程第六部分：使用用户控件实现主从表场景这是8个系列教程的第六部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。理解用户控件Silverlight和WPF的一个根本性的设计目标是允许开发人员能够轻松地把UI功能封装成可重用的控件。开发人员可以通过从一个现有的Control类（或Control基类或象TextBox, Button等这样的控件）继承而来实现新的自定义控件。或者，他们也可以创建可重用的用户控件，这既方便使用XAML标识文件来组成一个控件的UI，而且实现起来也容易。 对我们的Digg应用，我们想要实现一个主从表场景，在其中，应用允许终端用户搜索一个主题，填充一个跟该主题相关的故事的列表，然后允许他们从中选择一个故事来调出细节。例如，从列表中选择一个下述故事： 会调出这个故事的细节视图：Silverlight教程第七部分：使用控件模板定制控件的观感这是8个系列教程的第七部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。如何定制控件的观感（Look and Feel）WPF和Silverlight编程模型中一个强大无比的功能，就是能够完全定制所使用的控件的观感（Look and Feel ）。这允许开发人员和设计师对控件的界面以微妙和戏剧性的方式进行精雕细琢，促成无比的灵活性以创建出恰如所愿的用户体验。 在这篇教程里，我们将看一下你可以定制控件的几种方式，然后在结尾使用这些技术对我们的Digg应用的用户界面润色一下。 定制控件的内容在这个系列的第一部分里，我们在页面上加了一个简单的按钮控件，示范了如何把它的内容设成一个自定义的“Push Me!”文字字符串。然后我们连接了一个Click事件处理函数，在它被点击时执行一些代码： 这导致按钮在浏览器里象下面这么显示： 关于按钮控件，也许会让你感到惊奇的一件事情是，它的Content属性，不必是象“Push Me!”这样简单的字符串。实际上，我们可以把Content属性设成我们想要的任何形状或控件序列： 譬如，我们可以嵌入一个StackPanel，内含 和 控件： 点击放大这会导致我们的按钮在运行时看上去会象下面这样。注意，它依然保留同样的功能行为（按它的话，按钮会陷下去，点击事件处理函数也会象以前一样触发）： 我们也可以使用形状控件（象下面这样的Ellipse控件）来在按钮里面创建自定义的矢量图像：注意上面我是怎么使用一个偏移RadialGradientBrush来加一个非常好看的反射式光泽来填充Ellipse控件的：我们甚至可以搞些古怪，在按钮内嵌入可交互的象日历这样的控件： 点击放大在上面的例子中，日历控件是完全可以交互的，意味着终端用户可以前后翻月历，在日历里选择一个日期，然后按其中的按钮，触发Click事件处理函数：（注：我不清楚这是否会是一个好的用户体验，但它确实展示了你所能做之灵活性！） 我上面概述的这些类型的内容定制场景不仅对按钮控件有效，同样地对其他继承自ContentControl基类的其他控件也工作。 Silverlight教程第八部分：使用WPF创建一个Digg桌面应用这是8个系列教程的第八部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。使用WPF创建一个Digg桌面应用这最后一个教程的目的与前面7个有点不同。我们实际上不将在本教