[理学]Silerlight4月23日.doc

Silverlight教程第一部分： 使用Silverlight 4 和 VS 2008创建“Hello World”程序 【原文地址】Silverlight Tutorial Part 1: Creating "Hello World" with Silverlight 2 and VS 2008 【原文发表日期】 Friday, February 22, 2008 5:57 AM 这是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!”的消息： 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.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 的行列按相对比例的方式排放（如：你可以指定第二行的尺寸为第一行的2倍）。 你会发现 Grid 提供了非常多的功能和灵活性 - 而它也许会成为你最终最常用的布局面板控件。用布局面板排布我们的 Digg 页面我们创建 Digg 例子的目标，是得到最终看起来像下图的页面：要创建这种布局，我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。第一行的高度是 40 像素，而第二行则占据所有剩下的空间（Height="*"）：小技巧：注意上面我将 Grid 的 ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线：接下来，我们在刚才的根级 Grid 面板里，添加第二个 Grid 面板到第一行的位置，用它来排布页面顶部的行（页面头部）。我们在其中创建3列：分别容纳标题，搜索文本框，和搜索按钮： e.Error = System.Security.SecurityException -> System.Security.SecurityException: 安全性错误。 位于 System.Net.Browser.BrowserHttpWebRequest.InternalEndGetResponse(IAsyncResult asyncResult) 位于 System.Net.Browser.BrowserHttpWebRequest.<>c_DisplayClass5.<EndGetResp.完成了这些后，我们就得到了 Digg 搜索页面的基本布局，如下所示：注：如果不用嵌套的 Grid，我们还可以用一个 2行3列的 Grid 来完成这个布局，配合使用 Grid 的 ColSpan/RowSpan 特性来合并多个列中的内容（和你在 HTML table 中的做法类似）。我不这么做，而是选择使用嵌套 Grid 的原因，是因为这样更便于学习和理解。 现在我们已经完成了布局，接下来要做的是向其中添加控件。 对头部的行，我们用内建的 <Border> 控件（设置其 CornerRadius 为 10，以得到圆角效果）并在其中添加一些文本来创建标题。我们用内建的 <WatermarkedTextBox> 控件来创建第二列的搜索文本框。并在第3列放置一个搜索 <Button>. 然后我们在第二行放一些占位文字，稍后我们会在这里显示搜索结果。 注：下面我会直接在控件中内嵌样式信息（FontSize, Colors, Margins 等）。在这个系列教程中，晚一点我会演示如何用 Styles 来提取、封装这些设定到一个独立的文件中（类似 CSS），以便于在整个应用程序中重用。   现在，让我们运行一下应用程序，就会显示出如下的界面：动态改变应用程序的尺寸你也许注意到了，在上面的 XAML 中我们的顶层控件设置成了固定的高度和宽度： 这样设置，我们的 Silverlight 应用程序会一直保持这个固定的尺寸。放大浏览器的尺寸会更明显：虽然在某些场合下，将内嵌的应用程序固定在 HTML 页面的一个固定尺寸的区域内会很有用，但我们的 Digg 搜索程序不一样，我们宁愿它能自动随着浏览器而缩放，就像一个普通的 HTML 页面那样。 好消息是，这很容易实现。只要去除根控件上的 Width 和 Height 属性就行了：这样，我们的 Silverlight 应用程序就会自动扩展（或收缩），以填满其嵌入的 HTML 容器。因为我们用来测试的 SilverlightTestPage.html 文件将 Silverlight 控件放置在一个 HTML <div>元素中，并且其 CSS 设置中宽高均为 100%, 所以 Digg 应用程序最终会填满整个浏览器： 注意页面头部中的文字内容的尺寸是如何随着浏览器宽度而自动改变的：当我们缩小浏览器尺寸时，带水印的文本框和搜索按钮会保持同样的尺寸，因为其 Grid 容器列的宽度是固定的。包含 "Digg Search" 标题的 <Border> 控件却会自动调整尺寸，因为其 Grid 列的宽度设置成了 Width="*". 我们不需要编写一行代码就可以启用这个布局行为，Grid容器和布局系统会为我们自动调整大小或流动其中的任何东西。 Silverlight教程第三部分：使用 Networking取回数据并填充DataGrid 【原文地址】Silverlight Tutorial Part 3: Using Networking to Retrieve Data and Populate a DataGrid 【原文发表日期】 Friday, February 22, 2008 5:54 AM 这是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格式的例子。 使用 System.Net.WebClient 来异步调用Digg REST Feed在上面的搜索按钮被点击之后，我们将处理它的Click事件，从WaterMarkTextBox控件中取回要搜索的主题字符串，然后启动一个发向Digg的网络调用，为那个主题取回相应的XML列表。Silverlight 在 System.Net 命名空间下包含了WebClient辅助类（该类也在完整的.NET 框架下）。我们可以使用这个类从URL异步下载内容。异步下载Digg故事的好处是，在等待远程服务器的回复时，我们的UI不用阻塞或变得没有反应（允许我们拥有一个非常流畅的用户体验）。 通过WebClient类执行异步下载，我们要做的是注册一个DownloadStringCompleted事件处理方法（它将在请求的内容被下载之后被调用），然后调用WebClient.DownloadStringAsync(url) 辅助方法来开始下载： 使用上面的代码，我们现在就可以异步取回一个XML数据的字符串，内含有关用户想要的任何主题的Digg故事。使用LINQ to XML把XML格式的Digg故事分析成Story类对象至此，我们可以取回Digg故事数据的XML片段了，下一步将是对其进行分析（parse），并将它转换成我们可以操作和绑定到控件上的DiggStory对象。我们将首先定义一个DiggStory类，该类拥有可以映射到来自Digg的XML内容上的属性（我们将利用C#新的 "自动属性"的特性来实现）： 然后我们就可以使用LINQ （是内置于 Silverlight 2中的）和 LINQ to XML （是包含在我们的Silverlight 应用中的一个额外的库 ）来轻松地分析和过滤从Digg返回的XML文档，使用下面的代码把它翻译成一个DiggStory对象序列：注意上面，我们现在有了来自XML的我们可以操作的强类型的DiggStory对象。在DataGrid控件中显示Digg故事我们将使用新的 Silverlight DataGrid 控件来在我们的应用中显示Digg故事。要使用它，我们要引用Silverlight Data 控件程序集，然后把前面网页上的“Todo”文字替换成一个DataGrid控件声明： DataGrid允许你明确地配置列的声明和显示类型（为取得最大的控制），或者，你也可以设置它的AutoGenerateColumns属性成true，让DataGrid对数据源使用反射，基于你的对象的定义，为你创建默认的列。然后我们就可以更新我们的后台代码类，用编程的方法将DataGrid的ItemSource属性绑定到在点击搜寻按钮时从Digg取回的故事序列：现在，运行我们的Silverlight应用，做一个搜索的话，我们将看到从Digg取回的实时主题故事数据的列表：Silverlight的Datagrid支持你预期客户端网格控件应该拥有的所有的标准功能：双向原地编辑，选择，卷动，改变表列大小等等。它还支持自动流动的布局，意味着它可以动态地扩展或收缩来充满包含它的内容容器。DataGrid还拥有一个丰富的模板模型，允许你对显示和表列数据的编辑进行定制。我在将来会撰写更多的贴子，讨论如何使用DataGrid。Silverlight教程第四部分：使用 Style 元素更好地封装观感 (木野狐译) 【原文地址】Silverlight Tutorial Part 4: Using Style Elements to Better Encapsulate Look and Feel 【原文发表日期】 Friday, February 22, 2008 5:53 AM 这是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 页面的 <Border>控件（以及其中的<TextBlock> 标题）封装样式：我们可以在 App.xaml 文件中，用下列标签来创建两个 Style 元素，分别封装 <Border> 和 <TextBlock> 的设置信息，这些设置在前面是内联定义的：注意上述代码中，我们是如何为每个 Style 元素赋予一个唯一的 "Key" 值的。接下来我们就可以更新我们的 <Border>> 和 <TextBlock> 控件，让它们用这些 keys 来引用对应的样式定义。我们会使用一种叫做“标签扩展”(markup extensions) 的 XAML 特性来完成它。标签扩展用于非字面量的值需要被设置时（另一个适用场景是绑定表达式）。 我们还可以对 Page.xaml 文件中的其它控件也做类似的分离样式的处理，这样做之后，文件内容会变成类似这样：用这种方式封装样式设定，可以让开发者更好的关注应用程序的行为语义，并且还可以让我们跨控件/页面的重用样式。注：Beta1 中需要注意的一个问题是，当你输错样式名称和属性定义时，其错误信息不是很清楚（它会引发异常，但不告诉哪里设置不对）。这会在 Beta2 中得到改进。同时，如果你在加载样式时看到错误消息，请一定仔细查看拼写错误。 Silverlight 教程第五部分：用 ListBox 和 DataBinding 显示列表数据 (木野狐译) 【原文地址】Silverlight Tutorial Part 5: Using the ListBox and DataBinding to Display List Data【原文发表日期】 Friday, February 22, 2008 5:51 AM 这是8个系列教程的第5部分，这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用。这些教程请依次阅读，将有助于您理解 Silverlight 的一些核心编程概念。用 ListBox 和 DataBinding 显示我们的 Digg 故事前面我们使用了 DataGrid 控件来显示我们的 Digg 故事。当我们想用多列的格式来显示内容时，它很适合。然而对我们的 Digg 应用程序而言，也许我们想稍微改变一下页面的显示方式，让它看起来不太像网格，而更像一个列表。好消息是，这很容易实现 - 并且我们不需要改变任何程序代码。首先我们将 DataGrid 控件替换为 <ListBox> 控件。我们保持原有的控件名称 ("StoriesList")： 重新运行一下程序，搜索故事，ListBox 会显示搜索结果如下：你可能觉得奇怪 - 为什么每个条目都变成了 "DiggSample.DiggStory"? 这是因为我们把 DiggStory 对象绑定给了 ListBox（而绑定的默认行为会调用这些对象的 ToString() 方法）。如果我们想改用每个 DiggStory 对象的 Title 属性来显示条目，可以设置 ListBox 的 DisplayMemberPath 属性：这样做之后的效果如下：如果要每次显示不止一个值，或者定制每个条目的布局，我们可以覆盖 ListBox 控件的 ItemTemplate，并提供一个自定义的 DataTemplate. 然后在这个 DataTemplate 内，定制每个 DiggStory 对象如何显示。例如，我们可以用 DataTemplate 同时显示 DiggStory 的 Title 和 NumDiggs 值，如下所示： 在 DataTemplate 中，我们可以绑定 DiggStory 对象中我们所需的任何公共属性。注意上面我们是如何用 Binding 属性名 语法，配合两个 TextBlock 控件来完成这一点的。设置了上述 DataTemplate 后，我们的 ListBox 会显示如下：让我们再进一步，修改 DataTemplate 的定义如下。其中使用了两个 StackPanel - 一个用于水平地堆叠行，另一个用来垂直地堆叠文本块(TextBlock)。上述 DataTemplate 会使我们的 ListBox 用如下方式显示条目：  我们在 App.xaml 文件中定义如下的 Style 规则（注意如何使用 LinearGradientBrush 来获得 DiggPanel 上的好看的渐变背景效果）： 关于 ListBox 有一点值得注意 - 即使我们定制了其条目的显示方式，它仍然会提供悬浮以及选中状态的语义，不管你使用的是鼠标还是键盘（上/下方向键，Home/End，等）：ListBox 还支持完整的流式改变大小的功能 - 并在需要的时候提供内容的自动卷动功能（注意当窗口变小时，水平滚动条是如何出现的）：下一步我们现在已经把数据的显示切换成了基于列表的方式，并清理了其内容列表。现在让我们来完成这个程序的最后一点功能性行为 - 实现一个主/从工作流程，让用户在列表中选择某个文章时能查看其细节。详见下一篇： 使用用户控件实现主/从场景。（翻译：木野狐）Silverlight教程第六部分：使用用户控件实现主从表场景 【原文地址】Silverlight Tutorial Part 6: Using User Controls to Implement Master/Detail Scenarios 【原文发表日期】 Friday, February 22, 2008 5:50 AM 这是8个系列教程的第六部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。理解用户控件Silverlight和WPF的一个根本性的设计目标是允许开发人员能够轻松地把UI功能封装成可重用的控件。开发人员可以通过从一个现有的Control类（或Control基类或象TextBox, Button等这样的控件）继承而来实现新的自定义控件。或者，他们也可以创建可重用的用户控件，这既方便使用XAML标识文件来组成一个控件的UI，而且实现起来也容易。 对我们的Digg应用，我们想要实现一个主从表场景，在其中，应用允许终端用户搜索一个主题，填充一个跟该主题相关的故事的列表，然后允许他们从中选择一个故事来调出细节。例如，从列表中选择一个下述故事： 会调出这个故事的细节视图：我们将建造一个StoryDetailsView用户控件来实现这个细节视图，在从ListBox中选出一个故事时，我们将显示这个视图。 创建StoryDetailsView 用户控件我们开始在Visual Studio中的DiggSample项目上右击，选择“添加新项”，这会调出一个新项的对话框，我们将选择UserControl模板，将我们要建的新控件命名为“StoryDetailsView”： 这会往我们的DiggSample项目中添加一个以此为名的新UserControl：使用用户控件建造一个基本模式对话框我们将使用我们的StoryDetailsView控件有效地显示一个包含故事细节的对话框。当我们的故事细节用户控件显示时，我们将要它出现在网页的其他内容的上方，确保终端用户在关闭细节视图之前无法操作页面上的其他东西。 有几种不同的方式我们可以实现这个模式对话框似的行为。对这个特定的场景，我们将先从打开StoryDetailsView.xaml用户控件着手，往其中加入如下XAML内容： 上面第一个控件<Rectangle>是配置成Stretch以占据屏幕上剩下的空间，它的背景填充颜色是有点透明的灰色（因为它的Opactity 是 .765，你还可以看到一点它后面的东西 ）。第二个控件<Border>然后将重叠在这个Rectangle控件之上，在屏幕上占据一个固定的宽度。它具有一个蓝色的背景色，内含一个Close（关闭）按钮。 在显示时，我们的StoryDetailsView用户控件目前将显示象下面这样的UI：我们可以在该用户控件的后台代码文件中实现“CloseBtn_Click”事件处理方法，在按下按钮时，关闭按钮的事件处理函数将把用户控件的Visibility属性设成为“Collapsed”，这会导致它从屏幕上消失，用户将返回到下面的内容：  显示我们的StoryDetailsView控件让我们的StoryDetailsView用户控件出现在屏幕上的一个简单的方式是把它加在Page.xaml文件的底部，然后将其默认的Visibility属性设成Collapsed（意味着在应用装载时是不可见的）： 然后我们在Page.xaml的后台代码类中处理ListBox 控件的SelectionChanged事件：当用户选择列表中的一个特定故事时，我们可以使用ListBox 的 SelectionChanged事件将 ShowDetailsView 用户控件的Visibility属性设成“Visible”：这会导致我们的模式用户控件对话框出现，在用户点击它的“Close（关闭）”按钮时，它就会消失，用户就可以随意选择另一个故事，重复这个过程。把故事数据传入我们的StoryDetailsView用户控件最终我们想要我们的StoryDetailsView用户控件显示跟终端用户在故事ListBox中选择的故事有关的详细信息。在我们的ListBox的SelectionChanged事件处理函数中（在我们的page的后台代码类中），我们可以通过ListBox的SelectedItem属性获取对应于用户所选择的ListBox中的条目行的那个DiggStory数据对象。我们可以用来把这个 DiggStory 对象传入我们的StoryDetailsView用户控件的一个做法是，就在显示用户控件之前，把用户控件上的DataContext属性设置成所选择的DiggStory故事对象：然后我们在我们的用户控件内编写代码，使用DataContext来显示结果，或者我们也可以使用数据绑定表达式绑定其值。 例如，我们可以象下面这样更新StoryDetailsView的XAML，使用数据绑定表达式来来显示所选故事的标题：现在，当用户点击列表中的一个故事时：我们ListBox的事件处理函数就会处理其选择，将用户控件的DataContext设成所选择的DiggStory对象，然后显示用户控件：注意上面因为我们添加的数据绑定表达式的缘故，DiggStory的标题是如何出现在用户控件之中的。完成我们的用户控件的布局我们上面的例子演示了如何编写一个简单的主从表对话框工作流程的基本知识。我们可以往用户控件中加更多的控件，和数据绑