动手试验:创建 RSS 新闻阅读器

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(zh-cn,Expression.40).png

Web 源(如新闻源或播客)经常使用 XML 格式的文件来保存其内容。可以使用称为 阅读器聚合器 的程序订阅 Web 源并进行阅读。通常,阅读器将在计算机上保持打开状态,并在 Web 源更新时用新内容进行自我更新。Web 源的最常见提供机制名为“真正简单的整合 (RSS)”。

下列操作步骤演示了如何使用 Microsoft Expression Blend 和 RSS 源创建简单的 RSS 阅读器。RSS 阅读器可用于读取任何 XML 数据源,甚至读取本地文件或用户自己的网站上的 XML 文件。

Note注意:

下列操作步骤假设用户拥有有效的 Internet 连接。

Note注意:

Microsoft Silverlight 不支持 XML 数据源。但是,可以从 MSDN 上的 XML 数据 Cc294852.xtlink_newWindow(zh-cn,Expression.40).png 下找到使用 XML 数据的相关信息。

创建数据源

  1. 在“数据”面板中,单击“创建数据源”Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(zh-cn,Expression.40).png,然后单击“定义新的 XML 数据源”。

    此时,将显示“定义新的 XML 数据源”对话框。

  2. 在“数据源名称”旁边,键入 rssDS

  3. 在“XML 文件路径或 URL”文本框旁边,键入 http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml

    tip note提示:

    可以在“XML 数据的 URL”字段中使用任何 URL 或 XML 文件的本地路径。如果希望使用不同的 RSS 源,则可以通过在 Web 浏览器中打开提供者的网站(如 http://www.msnbc.com)并搜索其 RSS 源的链接来定位到相应的 URL。通常,该网站将列出可用的源以及用于订阅这些源的按钮。查找指向所需源的 XML 文件的链接。

  4. 在“定义位置”下,执行下列操作之一:

    • 若要使应用程序中的所有文档都能使用该数据,请选择“项目”。

    • 若要使数据只能由当前文档使用,请选择“此文档”。

  5. 单击“确定”。

    在“数据”面板中将会添加一个名为“rssDS”的数据源。展开节点并查看数据源的不同字段。不会显示数据,但会显示包含数据的字段名及其结构。

    此时即可将应用程序中的控件绑定到该数据。

    添加 XML 数据源之后的“数据”面板

    Cc294852.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(zh-cn,Expression.40).png

通过从“项目”面板拖动字段来绑定到数据字段

有多种方法可以将控件绑定到数据源中的项。以下过程演示了如何将数据源字段从“数据”面板拖到美工板上以创建两个新控件。或者,可以将数据源字段拖到现有控件上,以便将数据绑定到这些控件的属性。

  1. 在“工具”面板中,单击“资产”Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(zh-cn,Expression.40).png

  2. 在“资产”面板中,选择“控件”类别中的“全部”。

  3. 单击“控件”,然后单击 Image 控件 Cc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(zh-cn,Expression.40).png

  4. 使用鼠标在美工板的左上角绘制一个图像控件,其宽度和高度均约为 100 像素。

  5. 在“数据”面板中,依次展开“rss”、“channel”和“image”节点。将“url : (String)”节点拖动到新图像对象上。

    image 对象显示来自 MSNBC 网站的图像。“数据”面板在数据源周围显示一个黄色范围框,以指示数据的这部分已绑定到控件。

    添加 Image 对象并将其绑定到 URL 数据项之后的美工板(实际的美工板看起来可能会有所不同)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(zh-cn,Expression.40).png

  6. 在“数据”面板中,依次展开“rssDS”、“rss”和“channel”节点。将“title : (String)”节点拖动到美工板上图像对象的右侧。

    在此时将创建一个 TextBlock 控件,以显示新闻源的标题。使用“选择”工具移动并缩放文本块对象,然后使用“属性”面板的“文本”和“画笔”类别中的属性更改文本的外观。

    添加文本块对象并将其绑定到标题数据项之后的美工板(实际的美工板看起来可能会有所不同)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(zh-cn,Expression.40).png

使用数据上下文将多个控件绑定到相同数据

在向父对象分配 数据上下文 时,可以在所有子对象中使用数据的同一个快照。如果需要创建“列表-细节” ** 设计,这种方法非常有用。在列表-细节设计中,单击列表(列表窗格)中的项,就会在另一个对象(细节窗格)中显示该项的相关细节。

  1. 创建一个 Grid 布局容器 Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-cn,Expression.40).png,该容器将覆盖图像和标题之下的区域。所生成的网格对象将成为在其中通过下一个步骤自动设置数据上下文的父对象。

  2. 在“对象和时间线”面板中选择新的网格对象将其激活,以便可以添加子对象。

  3. 在“数据”面板中,确保选定了“列表模式”Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(zh-cn,Expression.40).png。在列表模式下从“数据”面板中拖出的项将创建列表控件。

  4. 依次展开“rss”、“channel”和“item (Array)”节点。将“title : (String)”节点拖动到网格对象的左上角。

    在此时将创建一个 ListBox 控件并向其中填充“item (Array)”集合中所有新闻播报的标题。如果选择 grid 对象,您将在“属性”面板中看到 DataContext 属性周围显示一个黄色范围框,以显示它已绑定到数据。如果选择列表框对象,您将看到 ItemsSource 属性绑定到数据。

    Note注意:

    可将 ItemsSource 属性设置为任何项集合。每次只能使用 ItemsSourceItems 属性中的一个。 ItemsSource 属性通常用于绑定到生成项的集合。 Items 属性可用于通过“编辑此集合中的项”按钮手动添加各个项。

    添加 ListBox 对象并将其绑定到“item (Array)”数据集合之后的美工板(实际美工板看起来可能会有所不同)

    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(zh-cn,Expression.40).png

  5. 在“数据”面板中,单击“详细信息模式”Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(zh-cn,Expression.40).png

  6. 依次展开“rss”、“channel”和“item (Array)”节点。将“description : (String)”节点拖动到 grid 对象的右侧。

    此时将创建网格对象,该对象内包含一个用以显示选定新闻播报描述的文本块对象。如果选择该文本块对象,您将在“属性”面板中看到 Text 属性周围显示一个黄色范围框,以显示它已绑定到数据。若要查看数据绑定的细节,请单击 Text 属性旁边的“高级选项”Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(zh-cn,Expression.40).png,然后单击“数据绑定”。

    添加 TextBlock 对象并将其绑定到“说明”数据项之后的美工板(实际的美工板看起来可能会有所不同)

    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(zh-cn,Expression.40).png

  7. 按 F5 运行应用程序,然后单击列表框中的任何项以更改选择项,从而阅读不同的新闻说明。

    Note注意:

    有些项可能会包含 HTML 文本。可以创建一个将从“Description”字符串中删除 HTML 元素的值转换器,然后可以在“创建数据绑定”对话框中应用该值转换器。有关如何创建值转换器的信息,请参阅动手试验:将数据从一种类型转换为另一种类型

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。