HighOnCoding.com: Creating a Simple RSS Reader Using Windows Presentation Foundation

Creating a Simple RSS Reader Using Windows Presentation Foundation

AzamSharp
Published Date: 7/2/2009 8:18:18 AM
Views: 3308

Abstract:
Windows Presentation Foundation is used to create attractive windows application. WPF is a super set of Silverlight and provides many advanced features like animation, 3D graphics etc. In this article we are going to setup the user interface for the RSS Reader and display the feeds.
Creating the RSS Service to Return RSS Feeds:

Let's start by creating a simple RSS Service which returns latest feeds from a URL. Here is the implementation of the RssService.cs:

The above code simply gets the ten latest feeds from the supplied URL and returns them as a List<Feed>. The Feed class consists of Title, Url and Description properties as shown below:

This completes our simple implementation of the RssService and Feed class. Now, let's check out the setup for the user interface.

Creating the User Interface:

Before we start designing and implementing the user interface it will be a better idea to take a look at the final design. The screenshot is shown below:

The above screenshot is the final design for our RSS Reader application.

Let's start by displaying the post title. The posts will be displayed using the ItemsControl. ItemsControls is ideal for displaying a list of items. The ItemsControl DataTemplate can easily be customized to display the data is a custom format. Here is the code for the ItemsControl:

One important thing to note is that the controls inside the DataTemplate are not displayed in the design view. This makes it harder to customize the controls using VS or Expression Blend 2. For simple styling like Background, Foreground, FontSize etc you can use XAML but as soon as it gets complicated then it becomes cumbersome to apply the design features using XAML. Check out the screenshot below which displays the design view when the controls are inside the DataTemplate of the ItemsControl.

One of the ways to solve this problem is to expose a collection as a resource and bind that resource to the ItemsControl. You will also need to assign the Binding Path to the correct property of the nested control to be bound. First, here is our Feeds collection.

And here is the XAML code which define the Feeds as an static resource:

We have defined two feed objects inside the feeds collection. We have also assigned some dummy data to the Title and the Description fields. Now, let's see how to bind the feeds resource to the ItemsSource control.

As, you might have noticed the ItemsSource property of the ItemsControl is set to the StaticResource feeds. The TextBlocks inside the ItemsControl are assigned to the bindable properties,Title and Description. Now, the design will update and shows the elements contained inside the DataTemplate of the ItemsControl as shown below:

This might be an overkill just to make the items in the DataTemplate appear in the design view but for developers who are not fluent in XAML the above tip can come handy.

The arrow buttons beside the Title are used to toggle the description. This effect is created using the Expander control. Let's take a look at the code below which is used to setup the Expander control for the Title and description properties.

The Expander.Header template is displayed to the user and Expander.Content is displayed to the user when the Expander is expanded. Take a look at the screenshot below which shows the description of the post when the post title is clicked.

The screenshot also reflects that HTML is not rendered property on a TextBlock control. Currently, the TextBlock control does not provide any functionality to display HTML. There are few TextBlock controls that provide this functionality. You can check out the following article about HtmlTextBlock control.

HtmlTextBlock

Adding Style to RSS Reader Application:

Let's add a little style to our application. We are going to add support for IsMouseOver dependency property and change the background of the Border control. The style is defined using the code below:

And here is the code that assigns the style to the Border control:

Conclusion:

In this article we started the implementation of a simple RSS Reader control. We learned how to display the controls inside the DataTemplate in the design view. We also used Expander control to display the description when the post title is clicked. In the next article we are going to add more features to build our RSS Reader WPF application.

[Download Sample]

Comments/Feedbacks


	Subject: Nice Article Name: Aly Date: 7/20/2009 10:02:07 PM Comment: Thanks for an awesome article. For some reason, I couldn't get source code to work. I will try doing it from scratch. Aly B http://www.net2invoice.com - Free Online Invoicing Solution