控件却会自动调整尺寸,因为其 Grid 列的宽度设置成了 Width=\"*\".我们不需要编写一行代码就可以启用这个布局行为,Grid容器和布局系统会为我们自动调整大小或流动其中的任何东西。
下一步
现在我们已经创建好了 Digg 程序的布局结构,并且定义好了页面头部的行。 下一步,我们会实现该程序的搜索行为 - 让它在程序的终端用户搜索某个标题时,能够真正的从 Digg.com 去获取故事内容。
如果你想知道怎么实现,请继续阅读下一篇: 使用 Networking 获取数据并填充 DataGrid。
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 )。
Digg.com有一套非常酷的通过HTTP通信的Digg APIs。因为他们有一个Flash跨域策略文件在他们的服务器上,我们可以直接从我们的Silverlight Digg 客户端应用中调用它们(而不要求我们通过我们的web服务器去访问他们的API)。 Digg.com 主题 Feed API
我们要允许终端用户使用我们的应用输入一个搜索主题(譬如,
“Programming”),然后点击“搜索”按钮,从Digg.com取回符合条件的前N条故事:
我们可以使用Digg.com 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。
以下的步骤
现在我们可以从Digg.com 取回Digg故事数据,并在我们的应用中将故事数据显示出来了。
下一步将是回到我们的Page.xaml 标识,去掉我们目前正在使用的行内的样式声明。
要做那个,让我们跳到下一个教程:《使用样式元素更好地封装观感(Look and Feel)》。
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 对象如何显示。
例如,我们可以用 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教程第六部分:使用用户控件实现主从表场景