Using a RSS Feed to Populate Data in Expression Blend

One of the most simple and effective ways of getting design data for testing look and feel into a WPF or Silverlight project is via RSS (the other way is by defining a data source directly from within Blend). I have used this method for trying out custom control design as seen here and here. Although this technique has been covered in a couple of places on the web I would like to add my entry for this – more as a place holder for my own easy access as anything J.

Well here goes.

  1. Find an RSS feed from your own collection or anywhere else for that matter – the example does not require a specific feed address. This is because all RSS feeds follow the same XML Schema when streaming content.
  2. Open Expression Blend and create either a Silverlight or WPF project – the technique works for both types of project.

  3. In the resulting main window add a list box. Once again the type of control may vary as long as it supports an item source of some kind so data grids, combo boxes, list views, etc. will all suffice.
  4. Now take your RSS feed address and enter it as a new XML data source. Here I am going to use the RSS feed from UX Magazine (http://feeds.feedburner.com/webdesigntutsplus).

     

     

  5. Once the feed data has been parsed the following structure should appear in Blend.

  6. The most important XML element to us is the “item” element. Simply drag this element to the list box (or other element) that was placed on Blend’s design canvas. Something similar to the following screenshot should now appear:

  7. The data context now needs to be set to the LayoutRoot grid by dragging the XML element “rss” onto it as shown below.

  8. The ItemsSource of the list box can be set by dropping the XML element “items” onto the list box and selecting ItemsSource form the combo box as shown here:

    The list box has now the required details within it – even

  9. The final tasks are to style the items, items container, etc. Clicking on the list box and selecting the Edit Additional Templates -> Edit Generated Items ->Create Empty allows the basic data template to be built

  10. Editing the resultant data template

  11. Dropping the XML element “title” from the data source onto the selected data template


    results in the following design-time population:

Of course far more can be achieved on styling the list box than shown here – but that is an exercise for the reader J

That’s all Folks…

Advertisements

~ by Intelligence4 on March 27, 2012.

 
%d bloggers like this: