· xaml c-sharp wp7 Reader RSS SilverLight SL

Windows Phone RSS Reader

As part of a competition to win a Windows Phone I have created 3 WP7 apps. One of these is a RSS reader made specific for the danish it news site Version2

The source for this application can be found on

Codeplex

The app is based on the Pivot control in WP7. In short this means that you have a page with a list of feed items. On the same page there is a ‘tab’ to another page where another feed’s items are visible:

The View

The view is XAML code and is implemented using the MVVM pattern. This pattern is extremely powerful when it comes to binding data to the view. Furthermore DataTemplates are used to reuse the layout of the feed items.

Here is an example of a DataTemplate:

<DataTemplate x:Name="FeedItemTemplate">
         <StackPanel Orientation="Vertical">
             <TextBlock Text="{Binding TruncatedTitle}" 
                        TextWrapping="Wrap" 
                        Margin="12,0,0,0" 
                        Style="{StaticResource PhoneTextTitle3Style}"/>
             <StackPanel Orientation="Horizontal" 
                         Margin="0,0,0,17">
                 <TextBlock Text="{Binding TimeStamp}" 
                            Foreground="#B0D011" 
                            Margin="12,-6,0,0" 
                            Style="{StaticResource PhoneTextSubtleStyle}" />
                 <TextBlock Text="{Binding Url}"  
                            TextWrapping="NoWrap" 
                            Margin="12,-6,0,0" 
                            Style="{StaticResource PhoneTextSubtleStyle}"/>
             </StackPanel>
         </StackPanel>
</DataTemplate>

This DataTemplate is then used in the ListBox ItemTemplate by using the FeedItemTemplate name:

<ListBox x:Name="NewsLbx"
         Margin="0,0,-12,0"
         ItemTemplate="{StaticResource FeedItemTemplate}"
         ItemsSource="{Binding NewsItems}"
         Tap="NewsLbx_Tap"/>

This is more or less the only thing required for the view to work. Remember the complete source is available at Codeplex, link at the top of this post.

The ViewModel

Now if you’re wondering where the view is actually getting it’s data from, then read on!

In the project there is class, MainViewModel, this class is responsible of holding the data that the view uses and in this class has the ObservableCollections that contains the data.

The view is bound to the data in the App.xaml.cs:

private static MainViewModel viewModel = null; public static MainViewModel ViewModel { get { // Delay creation of the view model until necessary if (viewModel == null) viewModel = new MainViewModel(); return viewModel; } }

The ItemViewModel is pretty straight forward; the class is implementing the INotifyPropertyChanged which makes the View auto updated when the data in the model is changed. To implement this the following is done:

public class FeedItemViewModel : INotifyPropertyChanged { private string title; public string Title { get { return title; } set { if (value != title) { title = value; NotifyPropertyChanged("Title"); } } } ... }

The most¬†noticeable thing in the above is the call to NotifyPropertyChanged(“Title”) – this is to make the the view aware that a property has changed.

The RSS Consumer

To retrieve the  RSS data a WebClient is used:

WebClient web = new WebClient(); web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(WebClient_DownloadStringCompleted); web.DownloadStringAsync(uri);

When the download is completed the following are executed:

StringReader sr = new StringReader(e.Result); var reader = XmlReader.Create(sr); var document = XDocument.Load(reader); var entries = from entry in document.Descendants("channel").Descendants("item") let title = entry.Element("title").Value let link = entry.Element("comments").Value let pubDate = entry.Element("pubDate").Value select new FeedItemViewModel() { Title = title, Url = link, PubDate = DateTime.Parse(pubDate) }; feedHandler(entries.ToArray());

By using LINQ the response from the RSS feed is handled and parsed into the FeedItemViewModel. This could probably be made a hole lot prettier, but hey; it’s open source and yours to edit on Codeplex.

That’s pretty much it!

If you have any comments/suggestions/questions, then please contact me :)

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket