动手试验:创建 RSS 新闻阅读器
Web 源(如新闻源或播客)经常使用 XML 格式的文件来保存其内容。可以使用称为阅读器 或聚合器 的程序订阅 Web 源并进行阅读。通常,阅读器将在计算机上保持打开状态,并在 Web 源更新时用新内容进行自我更新。Web 源的最常见提供机制名为“Really Simple Syndication (RSS)”。
下列操作步骤演示了如何使用 Microsoft Expression Blend 和 RSS 源创建简单的 RSS 阅读器。RSS 阅读器可用于读取任何 XML 数据源,甚至读取本地文件或用户自己的网站上的 XML 文件。
说明: |
---|
下列操作步骤假设用户拥有有效的 Internet 连接。 |
说明: |
---|
Silverlight 2 不支持 XML 数据源。但是,可以从 MSDN 上的在 Silverlight 中分析 XML 数据(此链接可能指向英文页面)下找到使用 XML 数据的相关信息。 |
创建数据源
创建数据源
在 Expression Blend 中,单击“文件”菜单上的“新建项目”,然后单击“WPF 应用程序(.exe)”。
将创建新项目。
在“项目”面板的“数据”下,单击“+XML”。
将打开“添加 XML 数据源”窗口。
在“连接名称”字段中,键入“rssDS”,然后在“XML 数据的 URL”字段中,键入 RSS 源的 URL。例如,若要创建指向 MSNBC 天气源的 XML 数据源,需要键入“http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml”。单击“确定”。
提示: 可以在“XML 数据的 URL”字段中使用任何 URL 或 XML 文件的本地路径。如果希望使用不同的 RSS 源,则可以通过在 Web 浏览器上打开提供者的网站(如 http://www.msnbc.com)并搜索其 RSS 源的链接来定位到相应的 URL。通常,该网站将列出可用的源以及用于订阅这些源的按钮。查找指向所需源的 XML 文件的链接。
在“项目”面板的“数据”下将会添加一个名为“rssDS”的数据源。展开节点并查看数据源的不同字段。不会显示数据,而只会显示包含数据的字段名及其结构。
此时即可将应用程序中的控件绑定到该数据。
添加 XML 数据源之后的“数据”面板
返回页首
通过从“项目”面板拖动字段来绑定到数据字段
有多种方法可以将控件绑定到数据源中的项。以下过程演示了如何将数据源字段从“项目”面板拖到美工板上以创建两个新控件。或者,可以将数据源字段拖到现有控件上,以便将数据绑定到这些控件的属性。
通过从“项目”面板拖动字段来绑定到数据字段
在“项目”面板的“数据”之下,依次展开“rss”、“channel”和“image”节点。将“url : (String)”节点拖动到美工板的左上角。在显示的下拉列表上,单击“Image”控件。
将在美工板上创建一个“Image”对象,并打开“创建数据绑定”对话框。
“选择字段”指定要将 URL 数据项绑定到的 Image 对象的属性。默认的选定内容(“Source”)是正确的,因此请单击“确定”。
美工板上的 Image 对象将反映从数据项的 URL 处发现的图像。使用“选择”工具 将 Image 对象拖动到美工板的左上角,并将其缩小。
添加 Image 对象并将其绑定到 URL 数据项之后的美工板(实际图像看起来可能会有所不同)
在“项目”面板的“数据”之下,依次展开“rssDS”、“rss”和“channel”节点。将“title : (String)”节点拖动到美工板上 Image 对象的右侧。在显示的下拉列表上,单击“Label”控件。“创建数据绑定”对话框中的“选择字段”旁边列出的默认属性(“Content”)是正确的,因此请单击“确定”。
此时,将显示“创建数据模板”对话框。
将选择“新建数据模板和显示字段”选项,并对其进行配置,以创建将在 TextBlock 控件中显示标题数据项的数据模板。单击“确定”。
新闻源的标题将显示在美工板上的新 Label 控件中。使用“选择”工具移动并缩放 Label 对象,然后使用“属性”面板的“文本”和“画笔”类别中的属性更改文本的外观。
说明: “对象和时间线”下不会显示 TextBlock 控件,这是因为 TextBlock 控件是“生成的内容”数据模板的一部分。“生成的内容”数据模板用于设计控件在绑定到数据之后的外观。有关模板的信息,请参阅创建或编辑控件模板。
添加 Label 对象并将其绑定到标题数据项之后的美工板(实际美工板看起来可能会有所不同)
返回页首
使用数据上下文将多个控件绑定到同一个数据
向父对象分配数据上下文之后,可以在多个子对象中使用数据的同一个快照。如果需要创建大纲-细节 设计,这种方法非常有用。在大纲-细节设计中,单击列表(大纲窗格)中的项,就会在另一个对象(细节窗格)中显示该项的相关信息。
使用数据上下文将多个控件绑定到相同数据
创建一个“网格”面板 ,该面板将覆盖图像和标题之下的区域。该网格对象将成为设置数据上下文的父对象。
在“对象和时间线”下,单击新的网格对象以将其选定,然后在“属性”面板中的“公共属性”下找到“DataContext”属性。
单击与“DataContext”属性关联的“高级属性选项” 按钮,然后单击“数据绑定”。
将打开“创建数据绑定”对话框。
在“数据字段”选项卡(默认选项卡)的“数据源”下,单击“rssDS”。在“字段”下,依次展开“rss”和“channel”节点,单击“item (数组)”,然后单击“完成”。
可以将项集合从数据源分配给新的网格对象。此时,网格对象的任何子对象都可以使用项集合的同一个快照。
使用“选择”工具双击新的网格对象将其激活,以便可以添加子对象。
在工具箱中,选择“ListBox”控件 ,然后绘制一个占据网格左半侧的 ListBox。
使用“选择”工具选择“ListBox”,然后在“属性”面板中的“公共属性”下找到“ItemsSource”属性。
说明: 可将“ItemsSource”属性设置为任何项集合。每次只能使用“ItemsSource”或“Items”属性中的一个。“ItemsSource”属性通常用于绑定到生成项的集合。“Items”属性可用于通过“编辑此集合中的项”按钮手动添加各个项。
单击与“ItemsSource”属性关联的“高级属性选项” 按钮,然后单击“数据绑定”。
将打开“创建数据绑定”对话框。
单击“显式数据上下文”选项卡。在“字段”下,依次展开“rss”和“channel”节点,然后单击“item (数组)”。单击“定义数据模板”按钮。
将打开“创建数据模板”对话框。
选择第三个选项“新建数据模板和显示字段”(默认选项)。清除“item”旁边的复选框,以快速清除所有复选框。选中“title”旁边的复选框,然后单击“确定”。
此时,ListBox 对象会与“item (数组)”数据建立数据绑定,并显示新闻项的列表。
添加 ListBox 对象并将其绑定到“item (数组)”数据集合之后的美工板(实际美工板看起来可能会有所不同)
在工具箱中,选择“TextBlock”控件 ,然后绘制一个占据网格右半侧的 TextBlock。
使用“选择”工具选择该 TextBlock,然后在“属性”面板中的“公共属性”下找到“Text”属性。单击与“Text”属性关联的“高级属性选项” 按钮,然后单击“数据绑定”。
说明: 将文本控件添加到美工板之后,Expression Blend 就会进入该控件的编辑模式。这意味着用户可以立即在该控件中键入内容,但不能访问该控件的所有属性。若要退出控件的编辑模式,请按 Esc 或单击“选择”工具。
将打开“创建数据绑定”对话框。
单击“显式数据上下文”选项卡。在“字段”下,依次展开“rss”和“channel”节点,单击“item (数组)”,然后单击“description : (String)”。单击“完成”。
因为 TextBlock 对象和 ListBox 对象共享相同的数据上下文,所以此时 TextBlock 对象会与 ListBox 中选定项的“description”建立数据绑定,并且会显示相应的描述。
添加 TextBlock 对象并将其绑定到 Description 数据项之后的美工板。(实际美工板看起来可能会有所不同)
按 F5 以运行应用程序,然后在应用程序中单击 ListBox 以更改选择项,从而阅读不同的新闻说明。
说明: 有些项可能会包含 HTML 文本。可以创建一个将从“Description”字符串中删除 HTML 元素的值转换器,然后可以在“创建数据绑定”对话框中应用该值转换器。有关如何创建值转换器的信息,请参阅动手试验:创建并应用值转换器。
返回页首