Content Index Search
 

Create an RSS news reader

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 Web site.

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

Creating the data source

  1. In Expression Blend, click New Project on the File menu, and then click Standard Application (.exe).
    A new project is created.
  2. Under Data in the Project panel, click +XML.
    The Add XML Data Source window opens.
  3. In the Connection Name field, type "rssDS" and in the URL for XML data field, type the URL to an RSS feed. For example, to create an XML data source to the MSNBC weather feed, you would type "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml". Click OK.
    Tip You can use any URL or local path to 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 browsing to a provider's Web site (for example, http://www.msnbc.com) and searching for a link to their RSS feeds. Typically, the Web site will list available feeds as well as buttons that allow you to subscribe to the feed. Look for a link to the XML file for the feed that you want.
  4. A data source named rssDS is added under Data in the Project panel. Expand the nodes and examine the different fields of your data source. The data is not displayed, only the names of fields that contain the data, and their structure.
    You can now bind controls in your application to the data.

The Data panel after the XML data source has been added

The Data panel after the XML data source has been added.

Binding to data fields by dragging them from the Project 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 Project 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. Under Data in the Project panel, expand the nodes rss, channel, and image. Drag the url : (String) node onto the artboard at the top left corner. On the drop-down list that appears, click the Image control.
    An Image object is created on the artboard, and the Create Data Binding dialog box opens.
  2. Select Field specifies the property of the Image object to which you want to bind the URL data item. The default selection (Source) is correct, so click OK.
    The Image object on your artboard reflects the image that is found at the URL from the data item. Use the Selection tool Selection tool to drag the Image object to the top left corner of the artboard and to scale it smaller.

    The artboard after an Image object has been added and bound to 
the URL data item (your image will look different)

    The artboard after an Image object has been added and bound to the URL data item. (Your image might look different.)

  3. Under Data in the Project panel, expand the nodes rssDS, rss, and channel. Drag the title : (String) node onto the artboard to the right of the Image object. On the drop-down list that appears, click the Label control. The default property that is listed next to Select Field in the Create Data Binding dialog box is correct (Content), so click OK.
    The Create Data Template dialog appears.
  4. The New Data Template and Display Fields option is selected, and is configured to create a data template that will display the title data item in a TextBlock control. Click OK.
    The title of the news feed appears in the new Label control on the artboard. Use the Selection tool to move and scale the Label object, and use the properties in the Text and Brushes categories of the Properties panel to change way the text looks.
    Note You will not see the TextBlock control under Objects and Timeline because the TextBlock control is part of the Generated Content data template that is used to design the look of the control when it is bound to data. For information about templates, see Edit a control template.

    The artboard after a Label object has been added and bound to 
the title data item (your artboard will look different)

    The artboard after a Label object has been added and bound to the title data item. (Your artboard might look different.)

Using a data context to bind multiple controls to the same data

Assigning a data context to a parent object allows you to use the same snapshot of data in multiple child objects. This is useful when you want to create a master-details design, where if you click an item in a list (the master pane), the information about that item appears in another object (the details pane).

  1. Create a Grid panel Grid panel that covers the area underneath the image and title. The Grid object will be your parent object where you set the data context.
  2. Under Objects and Timeline, click the new Grid object to select it, and then locate the DataContext property under Common Properties in the Properties panel.
  3. Click the Advanced Property Options Advanced property options button that is associated with the DataContext property and then click Data Binding.
    The Create Data Binding dialog box opens.
  4. On the Data Field tab (which is the default), under Data sources, click rssDS. Under Fields, expand the nodes rss and channel, click item (Array), and then click Finish.
    You have assigned the item collection from the data source to the new grid object. Any child of the grid object can now work with the same snapshot of the item collection.
  5. With the Selection tool, double-click the new grid object to activate it so that you can add child objects.
  6. On the Toolbox, select the ListBox control ListBox control, and then draw a ListBox that occupies the left half of the grid.
  7. Select the ListBox by using the Selection tool, and then locate the ItemsSource property under Common Properties in the Properties panel.
    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.
  8. Click the Advanced Property Options Advanced property options button that is associated with the ItemsSource property, and then click Data Binding.
    The Create Data Binding dialog box opens.
  9. Click the Explicit Data Context tab. Under Fields, expand the nodes rss and channel, and then click item (Array). Click the Define DataTemplate button.
    The Create Data Template dialog box opens.
  10. Select the third option, New Data Template and Display Fields (the default). Clear the check box next to item, to quickly clear all check boxes. Select the check box next to title, and then click OK.
    The ListBox object, now data-bound to the item (Array) data, displays the list of news items.

    The artboard after a ListBox object has been added and bound to 
the item(Array) data collection (your artboard will look different)

    The artboard after a ListBox object has been added and bound to the item (Array) data collection. (Your artboard might look different.)

  11. On the Toolbox, select the TextBlock control TextBlock control , and then draw a TextBlock that occupies the right half of the grid.
  12. Select the TextBlock by using the Selection tool, and then locate the Text property under Common Properties in the Properties panel. Click the Advanced Property Options Advanced property options button that is associated with the Text property, and then click Data Binding.
    Note When you add a text control to the artboard, Expression Blend enters the editing mode for the control. This means that you can immediately type content into the control, but you cannot access all of the properties for the control. To exit the editing mode for the control, press ESC or click the Selection tool.
    The Create Data Binding dialog box opens.
  13. Click the Explicit Data Context tab. Under Fields, expand the nodes rss, channel, and item (Array), and then click description : (String). Click Finish.
    The TextBlock object, now data-bound to the description of the item that is selected in the ListBox because both controls share the same data context, displays the description.

    The artboard after a TextBlock object has been added and bound to 
the Description data item (your artboard will look different)

    The artboard after a TextBlock object has been added and bound to the Description data item. (Your artboard might look different.)

  14. Press F5 to run your application, and then click in the ListBox in the application 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. For information about creating a value converter, see Create and apply a value converter.