Share via

Try it: Create an RSS news reader

  • Article

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(en-us,Expression.30).png

Web feeds such as news feeds or podcasts often use XML-formatted files for their content. You can use programs called readers or aggregators to subscribe to web feeds and read them. Often, a reader will stay open on your computer and will update itself with new content when the web feed is updated. The most common delivery mechanism of web feeds is named Really Simple Syndication (RSS).

The following procedures show you how to create a simple RSS reader by using Microsoft Expression Blend and an RSS feed. The RSS reader could be used to read any XML data source, even a local file or an XML file on your own website.

Note

The following procedures assume that you have a live connection to the Internet.

Note

Microsoft Silverlight does not support XML data sources. However, you can find information about working with XML data under Parsing XML Data in Silverlight on MSDN.

To create the data source

  1. In the Data panel, click Add Live Data Source Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(en-us,Expression.30).png, and then click Define New XML Data Source.

    The Define New XML Data Source dialog box appears.

  2. Next to Data source name, type "rssDS".

  3. Next to XML file path or URL text box, type "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml".

    Tip

    You can use any URL or local path of an XML file in the URL for XML data field. If you want to use a different RSS feed, you can locate the URL by opening a provider's website (for example, http://www.msnbc.com) in a web browser and searching for a link to their RSS feeds. Typically, the website will list available feeds, and also buttons that allow you to subscribe to the feed. Look for a link to the XML file for the feed that you want.

  4. Under Define in, do one of the following:

    • To make the data available to all documents in your application, select Project.

    • To make the data available only to the current document, select This document.

  5. Click OK.

    A data source named rssDS is added in the Data panel. Expand the nodes and examine the different fields of your data source. The data is not displayed, but the names of fields that contain the data and their structure are.

    You can now bind controls in your application to the data.

    The Data panel after the XML data source has been added
    Cc294852.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(en-us,Expression.30).png

To bind to data fields by dragging them from the Projects panel

There are multiple ways to bind controls to items in a data source. The following procedure shows you how to drag data source fields from the Data panel onto the artboard to create two new controls. Alternatively, you could drag data source fields onto existing controls to bind the data to properties on those controls.

  1. In the Tools panel, click Assets Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png.

  2. In the Assets panel, select the All in the Controls category.

  3. Click Controls, and then click the Image control Cc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(en-us,Expression.30).png.

  4. Using your mouse, draw an image control on the artboard, about 100 pixels wide by 100 pixels high, at the upper-left corner.

  5. In the Data panel, expand the nodes rss, channel, and image. Drag the url : (String) node onto the new image object.

    The image object displays the image from the MSNBC website. The Data panel displays a yellow bounding box around the data source to indicate that part of the data has been bound to a control.

    The artboard after an Image object has been added and bound to the URL data item (your artboard might look different)
    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(en-us,Expression.30).png

  6. In the Data panel, expand the nodes rssDS, rss, and channel. Drag the title : (String) node onto the artboard to the right of the image object.

    A TextBlock control is created to display the title of the news feed. Use the Selection tool to move and scale the text block object, and use the properties in the Text and Brushes categories of the Properties panel to change way the text looks.

    The artboard after a text block object has been added and bound to the title data item (your artboard might look different)
    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(en-us,Expression.30).png

To use a data context to bind multiple controls to the same data

A data context, when assigned to a parent object, allows all the child objects to use the same snapshot of data. This is useful when you want to create a master-details design, in which, if you click an item in a list (the master pane), the details about that item appear in another object (the details pane).

  1. Create a Grid layout container Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(en-us,Expression.30).png that covers the area underneath the image and title. The resulting grid object will be your parent object where the data context will be set automatically by the next step.

  2. Select the new grid object in the Objects and Timeline panel to activate it so that you can add child objects.

  3. In the Data panel, make sure List Mode Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(en-us,Expression.30).png is selected. Items dragged from the Data panel in list mode will create a master control.

  4. Expand the nodes rss, channel, and item (Array). Drag the title : (String) node into the upper-left corner of the grid object.

    A ListBox control is created and populated with the titles of all the news stories in the item (Array) collection. If you select the grid object and look in the Properties panel, you'll see a yellow bounding box around the DataContext property to show that it is bound to data. If you select the list box object, you'll see the ItemsSource property bound to data.

    Note

    The ItemsSource property can be set to any collection of items. Only one of the ItemsSource or Items properties can be used at a time. The ItemsSource property is typically used to bind to a collection of generated items. The Items property can be used to manually add individual items by using the Edit items in this collection button.

    The artboard after a ListBox object has been added and bound to the item (Array) data collection (your artboard might look different)
    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(en-us,Expression.30).png

  5. In the Data panel, click Details Mode Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(en-us,Expression.30).png.

  6. Expand the nodes rss, channel, and item (Array). Drag the description : (String) node into the right side of the grid object.

    A grid object is created with a text block object inside that displays the description of the selected news story. If you select the text block object and look in the Properties panel, you'll see a yellow bounding box around the Text property to show that it is bound to data. To see the specifics of the data binding, click Advanced property options Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(en-us,Expression.30).png next to the Text property, and then click Data binding.

    The artboard after a TextBlock object has been added and bound to the Description data item (your artboard might look different)
    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(en-us,Expression.30).png

  7. Press F5 to run your application, and then click any item in the list box to change the selection to read different news descriptions.

    Note

    Some items might include HTML text. You could create a value converter that would remove the HTML elements from the Description string, and then you could apply that value converter in the Create Data Binding dialog box. For information about creating a value converter, see Try it: Convert data from one type to another.