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:
public class RssService
{
private string _feedUrl;
public string FeedUrl
{
get { return _feedUrl; }
set { _feedUrl = value; }
}
public RssService(string feedUrl)
{
_feedUrl = feedUrl;
}
public List<Feed> GetLatest()
{
var rssFeed = XDocument.Load(_feedUrl);
var feeds = (from item in rssFeed.Descendants("item")
select new Feed()
{
Title = item.Element("title").Value,
Description = item.Element("description").Value
}).Take(10).ToList<Feed>();
return feeds;
}
}
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:
public class Feed
{
public string Title { get; set; }
public string Url { get; set; }
public string Description { get; set; }
}
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:
<ItemsControl Grid.Row="0" Grid.Column="1" Margin="10" Width="Auto" x:Name="icFeeds" Background="{x:Null}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
.... other stuff here
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.
public class Feeds : List<Feed>
{
}
And here is the XAML code which define the Feeds as an static resource:
<Window.Resources>
<local:Feeds x:Key="feeds">
<local:Feed Title="feed 1" Description="this is description feed 1" />
<local:Feed Title="this is bold feed 2 and this has a long title" Description="this is description feed 2" />
</local:Feeds>
</Window.Resources>
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.
<ItemsControl ItemsSource="{StaticResource feeds}" Grid.Row="0" Grid.Column="1" Margin="10" Width="Auto" x:Name="icFeeds" Background="{x:Null}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel>
<TextBlock Text="{Binding Path=Title}" Margin="5" FontSize="14" Foreground="#FF000000" />
<TextBlock TextAlignment="Left" Width="200" TextWrapping="Wrap" Margin="5" Text="{Binding Path=Description}" FontSize="12" FontStyle="Normal" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
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.
<Expander IsExpanded="False" >
<Expander.Header>
<Border Style="{StaticResource FeedTitleStyle}" Margin="5" BorderThickness="2" CornerRadius="2,2,2,2" BorderBrush="#FF00000C" >
<TextBlock Text="{Binding Path=Title}" Margin="5" FontSize="14" Foreground="#FF000000" />
</Border>
</Expander.Header>
<Expander.Content>
<Border Margin="30,5" BorderThickness="2,2,2,2" Background="#FFE06F12" CornerRadius="2,2,2,2" BorderBrush="#FF0A0000">
<TextBlock TextAlignment="Left" Width="200" TextWrapping="Wrap" Margin="5" Text="{Binding Path=Description}" FontSize="12" FontStyle="Normal" />
</Border>
</Expander.Content>
</Expander>
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:
<Window.Resources>
<Style x:Key="FeedTitleStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="#FFD68D36" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
And here is the code that assigns the style to the Border control:
<Border Style="{StaticResource FeedTitleStyle}"></Border>
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]