試試看： 建立 RSS 新聞閱讀器

  • 發行項

本頁僅適用 WPF 專案

新聞摘要或播客 (Podcast) 這類網頁摘要，通常會在內容中使用 XML 格式的檔案。您可以使用「讀取器」或「匯集軟體」這類程式，訂閱網頁摘要並讀取其內容。閱讀器通常在您的電腦上會保持開啟，而且會在更新網頁摘要時以新內容自行更新。網頁摘要中最常用的傳遞機制為「真正簡易新聞訂閱方式」(RSS)。

下列程序顯示如何使用 Microsoft Expression Blend 建立簡單 RSS 閱讀器，並建立 RSS 摘要。RSS 閱讀器可以用來閱讀任何 XML 資料來源，甚至是本機檔案或網站上的 XML 檔案。

Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

下列程序假設您已連線至網際網路。
Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

Silverlight 2 不支援 XML 資料來源。不過，您可以在 MSDN 的在 Silverlight 中剖析 XML 資料下找到關於使用 XML 資料的資訊。

建立資料來源

建立資料來源

  1. 在 Expression Blend 中，按一下 [檔案] 功能表上的 [新增專案]，然後按一下 [WPF 應用程式 (.exe)]。

    隨即建立新專案。

  2. 在 [專案] 面板的 [資料] 下，按一下 [+XML]。

    隨即開啟 [新增 XML 資料來源] 視窗。

  3. 在 [連線名稱] 欄位中輸入 rssDS，並在 [XML 資料的 URL] 欄位中輸入 RSS 摘要的 URL。例如，若要建立 MSNBC 氣象摘要的 XML 資料來源，請輸入 "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml"。按一下 [確定]。

    Cc294852.alert_tip(zh-tw,Expression.10).gif秘訣：

    您可以在 [XML 資料的 URL] 欄位中，使用任何 URL 或 XML 檔案的本機路徑。如果要使用不同的 RSS 摘要，請在網頁瀏覽器中開啟提供者的網站 (例如，http://www.msnbc.com) 然後搜尋其 RSS 摘要的連結，即可尋找 URL。一般來說，網站會列出可用的摘要以及可用來訂閱摘要的按鈕。請在其中找出您要使用之摘要的 XML 檔案連結。

  4. [rssDS] 這個資料來源會新增至 [專案] 面板的 [資料] 中。展開節點並檢查資料來源的各個欄位。這樣並不會顯示資料，而只會顯示含有該資料的欄位名稱及其結構。

    您現在可以將應用程式中的控制項繫結至資料。

    新增 XML 資料來源之後的 [資料] 面板

    Cc294852.14b54f1f-7d84-4604-ba0a-35b50460b6cf(zh-tw,Expression.10).png

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

從專案面板拖曳資料欄位以繫結至資料欄位

有許多方法可以將控制項繫結至資料來源中的項目。下列程序顯示如何將資料來源欄位從 [專案] 面板拖曳至畫板，以建立兩個新的控制項。您也可以將資料來源欄位拖曳至現有控制項，以將資料繫結至那些控制項上的屬性。

從專案面板拖曳資料欄位以繫結至資料欄位

  1. 在 [專案] 面板的 [資料] 下，展開節點 [rss]、[channel] 及 [image]。請將 [url : (String)] 節點拖曳至畫板的左上角。請在出現的下拉式清單上，按一下 [Image] 控制項。

    隨即會在畫板上建立 [Image] 物件，並且開啟 [建立資料繫結] 對話方塊。

  2. [選取欄位] 會指定您要將 URL 資料項目繫結至的 Image 物件屬性。預設選項 ([Source]) 正確，因此請按一下 [確定]。

    畫板上的 Image 物件會反映從資料項目的 URL 中找到的影像。請使用 [選取] 工具 Cc294852.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png，將 Image 物件拖曳至畫板的左上角，然後將該物件調小。

    Image 物件已新增並繫結至 URL 資料項目之後的畫板 (您的影像可能會不同)。

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

  3. 在 [專案] 面板的 [資料] 下，展開節點 [rssDS]、[rss] 及 [channel]。將 [title : (String)] 節點拖曳至 Image 物件右邊的畫板上。請在出現的下拉式清單上，按一下 [Label] 控制項。列在 [建立資料繫結] 對話方塊的 [選取欄位] 旁邊的預設屬性正確 ([Content])，因此請按一下 [確定]。

    [建立資料範本] 對話方塊會隨即出現。

  4. 已選取 [新資料範本與顯示欄位] 選項，而且設定之後就可以建立會在 TextBlock 控制項中顯示標題資料項目的資料範本。按一下 [確定]。

    新聞摘要的標題會顯示在畫板的新 Label 控制項中。請使用 [選取] 工具移動及縮放 Label 物件，然後使用 [屬性] 面板之 [文字] 和 [筆刷] 類別中的屬性變更文字的顯示方式。

    Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

    您在 [物件與時間軸] 之下不會看見 TextBlock 控制項，因為 TextBlock 控制項屬於 [產生的內容] 資料範本的一部分，此範本用於設計當控制項繫結至資料時控制項的外觀。如需有關範本的詳細資訊，請參閱建立或編輯控制項範本。

    Label 物件已新增並繫結至標題資料項目之後的畫板 (您的畫板外觀可能會不同)

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

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

使用資料內容將多個控制項繫結至相同的資料

將資料內容指派給父系物件，可讓您在多個子物件中使用相同的資料快照。當您要建立「主圖形/詳細資料」設計時，這個功能會很有幫助；這是指如果您按一下清單中的項目 (主要窗格)，會在另一個物件中顯示該項目的詳細資訊 (詳細資料窗格)。

使用資料內容將多個控制項繫結至相同的資料

  1. 建立 [格線] 面板 Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-tw,Expression.10).png 來涵蓋影像和標題下的區域。Grid 物件將會是您用來設定資料內容的父系物件。

  2. 在 [物件與時間軸] 下，按一下新的 Grid 物件加以選取，然後尋找 [屬性] 面板之 [一般屬性] 下的 [DataContext] 屬性。

  3. 按一下與 [DataContext] 屬性相關聯的 [進階屬性選項] Cc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(zh-tw,Expression.10).png 按鈕，然後按一下 [資料繫結]。

    [建立資料繫結] 對話方塊隨即開啟。

  4. 在 [資料欄位] 索引標籤 (預設值) 的 [資料來源] 下，按一下 [rssDS]。在 [欄位] 下，展開節點 [rss] 及 [channel]，並按一下 [item (Array)]，然後按一下 [完成]。

    您已將項目集合從資料來源指派給新的格線物件。格線物件的任何子物件現在都可使用相同的項目集合快照。

  5. 使用 [選取] 工具，按兩下新格線物件以啟動它，這樣您就可以新增子物件。

  6. 在 [工具箱] 中選取 [ListBox] 控制項 Cc294852.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-tw,Expression.10).png，然後繪製會佔據格線左半部的 ListBox。

  7. 使用 [選取] 工具選取 [ListBox]，然後尋找 [屬性] 面板之 [一般屬性] 下的 [ItemsSource] 屬性。

    Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

    [ItemsSource] 屬性可以設為任何項目的集合。您一次只能使用 [ItemsSource] 或 [Items] 這兩個屬性的其中一個。[ItemsSource] 屬性通常會用來繫結至所產生項目的集合。您可以透過使用 [編輯此集合的項目] 按鈕的方式，使用 [Items] 屬性來手動新增個別項目。

  8. 按一下與 [ItemsSource] 屬性相關聯的 [進階屬性選項] Cc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(zh-tw,Expression.10).png 按鈕，然後按一下 [資料繫結]。

    [建立資料繫結] 對話方塊隨即開啟。

  9. 按一下 [明確資料內容] 索引標籤。在 [欄位] 下，展開節點 [rss] 及 [channel]，然後按一下 [item (Array)]。按一下 [定義 DataTemplate] 按鈕。

    [建立資料範本] 對話方塊隨即開啟。

  10. 選取第三個選項 [新資料範本與顯示欄位] (預設值)。清除 [項目] 旁邊的核取方塊，以快速清除所有核取方塊。選取 [title] 旁的核取方塊，然後按一下 [確定]。

    ListBox 物件現在已繫結至 [item (Array)] 資料，並顯示新項目的清單。

    ListBox 物件已新增並繫結至 item(Array) 資料集合之後的畫板 (您的畫板外觀可能會不同)

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

  11. 在 [工具箱] 中選取 [TextBlock] 控制項 Cc294852.42165963-00f7-4a33-abcd-b0849edebada(zh-tw,Expression.10).png，然後繪製會佔據格線右半部的 TextBlock。

  12. 使用 [選取] 工具選取 [TextBlock]，然後尋找 [屬性] 面板之 [一般屬性] 下的 [Text] 屬性。按一下與 [Text] 屬性相關聯的 [進階屬性選項] Cc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(zh-tw,Expression.10).png 按鈕，然後按一下 [資料繫結]。

    Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

    在畫板中新增文字控制項時，Expression Blend 會進入該控制項的編輯模式。這表示您可以立即在控制項中輸入內容，但是無法存取控制項的所有屬性。若要結束控制項的編輯模式，請按下 ESC 鍵，或按一下 [選取] 工具。

    [建立資料繫結] 對話方塊隨即開啟。

  13. 按一下 [明確資料內容] 索引標籤。在 [欄位] 下，展開節點 [rss]、[channel] 及 [item (Array)]，然後按一下 [description : (String)]。按一下 [完成]。

    TextBlock 物件現在已繫結至 ListBox 中所選項目的 [description] (因為這兩個控制項共用相同的資料內容)，並顯示描述。

    TextBlock 物件已新增並繫結至 Description 資料項目之後的畫板(您的畫板外觀可能會不同)。

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

  14. 按下 F5 執行應用程式，然後按一下應用程式中的 ListBox，將該選項變更為閱讀不同的新聞描述。

    Cc294852.alert_note(zh-tw,Expression.10).gif注意事項：

    有些項目可能包含 HTML 文字。您可以建立會從 [描述] 字串中移除 HTML 元素的值轉換器，然後在 [建立資料繫結] 對話方塊中套用該值轉換器。如需有關建立值轉換器的詳細資訊，請參閱試試看：建立及套用值轉換器。

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首