Try it: 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 website.

Note

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

Note

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

Creating the data source

To create the data source

1. In Expression Blend, click New Project on the File menu, and then click WPF 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 opening a provider's website in a Web browser (for example, http://www.msnbc.com) and searching for a link to their RSS feeds. Typically, the website 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

   

Back to top

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.

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

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 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 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 box 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 Create or edit a control template.

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

   

Back to top

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).

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

1. Create a 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  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. In the Toolbox, select the 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  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 might look different)

    

11. In the Toolbox, select the 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 Advancedpropertyoptions  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 ExplicitData 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 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 box. For information about creating a value converter, see Try it: Create and apply a value converter.

Back to top