RSS Reader

RSS Reader allows you to access RSS Feed content using the Service Model Syndication Support in Silverlight plus has an optional Out-of-Browser mode for browsing any compatible Syndication Feed.

Printer Friendly Download Tutorial (341KB) Download Source Code (7.47KB) Online Demonstration

Step 1

Start Microsoft Visual Web Developer 2010 Express, then Select File then New Project... Select "Visual Basic" then "Silverlight Application" from Templates, select a Location if you wish, then enter a name for the Project and then click OK, see below:

New Project

Step 2

New Silverlight Application window should appear, uncheck the box "Host the Silverlight Application in a new Web site" and then select the required Silverlight Version, see below:

New Silverlight Application

Step 3

A Blank Page named MainPage.xaml should then appear, see below:

MainPage.xaml

Step 4

Select Project then Add Reference... The "Add Reference" window should appear, select "System.ServiceModel.Syndication" from the ".NET" List, see below:

Add System.XML.Linq Reference

Step 5

Add the Reference to "System.ServiceModel.Syndication" by Clicking on OK
Right Click on the Page or the entry for "MainPage.xaml" in Solution Explorer and choose the "View Code" option. In the Code View above the "Partial Public Class MainPage" line type the following:

Imports System.ServiceModel.Syndication
Imports System.Windows.Data
Imports System.Text.RegularExpressions
Imports System.Windows.Browser

See Below:

MainPage.xaml Imports

Step 6

While still in the Code View, below the "End Class" for "Partial Public Class MainPage" Class type the following Classes:

Public Class LinkFormatter
    Implements IValueConverter
  Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
      ByVal parameter As Object, _
      ByVal culture As System.Globalization.CultureInfo) As Object _
      Implements IValueConverter.Convert
    Return DirectCast(value, System.Collections.ObjectModel.Collection(Of SyndicationLink)).FirstOrDefault.Uri
  End Function

  Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
     ByVal parameter As Object, _
     ByVal culture As System.Globalization.CultureInfo) As Object _
     Implements IValueConverter.ConvertBack
    Throw New NotImplementedException()
  End Function
End Class

Public Class HtmlSanitiser
    Implements IValueConverter
    Implements IValueConverter
  Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
      ByVal parameter As Object, _
      ByVal culture As System.Globalization.CultureInfo) As Object _
      Implements IValueConverter.Convert
    Dim _convert As String
    _convert = Regex.Replace(TryCast(value, String), "<.*?>", "") ' Remove HTML Tags
    _convert = Regex.Replace(_convert, "\n+\s+", vbLf & vbLf) ' Remove Spaces
    _convert = HttpUtility.HtmlDecode(_convert) ' Decode HTML Entities
    Return _convert
  End Function

  Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
     ByVal parameter As Object, _
     ByVal culture As System.Globalization.CultureInfo) As Object _
     Implements IValueConverter.ConvertBack
    Throw New NotImplementedException()
  End Function
End Class

See Below:

MainPage.xaml ValueConverter Classes

Step 7

Return to the MainPage Designer View by selecting the "MainPage.xaml" Tab.
Then from the All Silverlight Controls section in the Toolbox select the Canvas control:

Canvas Control

Step 8

Draw a Canvas on the Page then in the XAML Pane above the "</Grid>" then change the "Canvas1" line to the following:

<Canvas Height="65" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></Canvas>

See below:

MainPage with Toolbar Canvas

Step 9

Then from the Common Silverlight Controls section in the Toolbox select the TextBox control:

TextBox Control

Step 10

Draw a TextBox on the Canvas and in the XAML Pane below the "<Canvas>" tag and above the "</Canvas>" change "TextBox1" to the following:

<TextBox Canvas.Left="6" Canvas.Top="6" Height="23" Width="237" Name="Location"/> 

See below:

MainPage with Location TextBox

Step 11

Then from the Common Silverlight Controls section in the Toolbox select the Button control:

Button Control

Step 12

Draw a Button on the Canvas (Toolbar) next to the TextBox, by dragging the Button from the Toolbox onto the Canvas then in the XAML Pane inbetween the "<TextBox>" and "</Canvas>" tags change the "<Button>" line to the following:

<Button Canvas.Left="249" Canvas.Top="6" Height="23" Width="75" Name="Go" Content="Go"/> 

See below:

MainPage with TextBox and Button

Step 13

Select Debug then the "Build RSSReader" option from the menu, see below:

Build RSSReader

Step 14

Then in the XAML Pane for MainPage.xaml below the "x:Class="RSSReader.MainPage" section, type the following XAML:

xmlns:app="clr-namespace:RSSReader"

See below:

MainPage.xaml Namespaces

Step 15

While still in the XAML Pane for MainPage.xaml above the "<Grid>" tag and below the "<UserControl>" tag, type the following XAML:

<UserControl.Resources>
  <app:HtmlSanitiser x:Key="HtmlSanitiser"/>
  <app:LinkFormatter x:Key="LinkFormatter"/>
</UserControl.Resources>

Again while still in the XAML Pane for MainPage.xaml below the "<Button>" and above "</Canvas>" Tag, type the following ComboBox XAML:

<ComboBox Canvas.Left="6" Canvas.Top="36" Height="23" Width="318" ItemsSource="{Binding}" Name="Title">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Title.Text,Converter={StaticResource HtmlSanitiser}}"/>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

See below:

MainPage with Toolbar Buttons and ComboBox

Step 16

While still in the XAML Pane below the "</Canvas>" and above the "</Grid>" Tag, type the following XAML:

<ScrollViewer Height="235" Width="400" Margin="0,65,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
  <StackPanel Orientation="Vertical" x:Name="Content">
    <HyperlinkButton FontSize="16" TargetName="_blank" Content="{Binding Title.Text,Converter={StaticResource HtmlSanitiser}}" 
      NavigateUri="{Binding Links,Converter={StaticResource LinkFormatter}}"/>
    <TextBlock FontSize="14" TextWrapping="Wrap" Text="{Binding PublishDate}"/>
    <TextBlock TextWrapping="Wrap" FontSize="14" Text="{Binding Summary.Text,Converter={StaticResource HtmlSanitiser}}"/>
  </StackPanel>
</ScrollViewer>

See below:

MainPage with TextBox, Button and ScrollViewer Content

Step 17

Right Click on the Page or the entry for "MainPage.xaml" in Solution Explorer and choose the "View Code" option. In the Code View in the "Public Sub New()" constructor below the "InitializeComponent()" line type the following:

Location.Text = "http://feeds.feedburner.com/cespageblog" 

See Below:

MainPage.xaml Constructor

Step 18

Return to the Designer View by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the "Go..." Button and type in the Go_Click Sub:

Dim _client As New WebClient
AddHandler _client.OpenReadCompleted, Sub(s As Object, args As OpenReadCompletedEventArgs)
    If Not args.Cancelled Then
      Try
        Dim _reader As XmlReader = XmlReader.Create(args.Result)
        Dim _feed As SyndicationFeed = SyndicationFeed.Load(_reader)
        Title.DataContext = _feed.Items
        Title.SelectedIndex = 0
      Catch ex As Exception
        MessageBox.Show(ex.ToString, "RSS Reader", MessageBoxButton.OK)
      End Try
    End If
  End Sub
_client.OpenReadAsync(New Uri(Location.Text))

See Below:

Go Button Click Event

Step 19

Return to the Designer View by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the "Title" ComboBox and type in the Title_SelectionChanged Sub:

Content.DataContext = CType(CType(sender, ComboBox).SelectedItem, SyndicationItem)

See Below:

Title SelectionChanged Event

Step 20

Save the Project as you have now finished the Silverlight application. Select Debug then Start Debugging or click on Start Debugging:

Start Debugging

After you do, the following will appear in a new Web Browser window:

Application Running

Step 21

If you Click on Go... then Select an RSS Feed Item Title, that RSS Feed Item Content will appear, see below:

RSS Reader

Step 22

Close the Application and Browser window by clicking on the Close Button Close on the top right of the Application Window and Web Browser to Stop the application.

Step 23

There is an issue with this RSS Reader as it only works if there is special file located on the Server where the RSS Feed is located called a "Client Access Policy".
However it is possible to access any RSS Feed, by following the next few optional Steps.
Select Project then Properties... The "Properties" window should appear, check the box "Enable running application out of the browser", also make sure the Target Silverlight Version is "Silverlight 4", see below:

Enable running application out of the browser

Step 24

While still in the Properties Window, click on the "Out-of-Browser Settings..." button, set the "Width" value to 400 and the "Height" to 300,
then check the box "Require elevated trust when running outside the browser", see below:

Out-of-Browser Settings

Step 25

Confirm the Settings by Clicking on OK.
Save the Project again you have now finished updating the Silverlight application. Select Debug then Start Debugging or click on Start Debugging:

Start Debugging

After you do, the following will appear in a new Web Browser window:

Application Running

Step 26

To access any RSS Feed only works Out-of-Browser with Full Trust to access a Feed where there is no "Client Access Policy" or "Cross Domain Access".
Right-click on the Application in the Browser and choose the "Install RSSReader Application onto this Computer..." option to show the Installation Screen, see below:

Install Application

Step 27

Check the "Start menu" or "Desktop" boxes to add a Shortcut to the Application in either or both locations, and then click on the "Install" button, the following will then appear in a new Window:

Application Installed

Step 28

It will be possible to enter into the Location box any RSS Feed URL or RSS Address and the RSS Reader will be able to access it.
Close the Application and Browser window by clicking on the Close Button Close on the top right of the Application Window and Web Browser to Stop the application.

This is a Simple RSS Reader, you can try customising the application to make it more useful, also add more of the Syndication items to display more information, plus with the Out-of-Browser support you are not limited to RSS Feeds which have a "Client Access Policy", use it as a basis for your own RSS Feed reader, it is up to you!

Share

Creative Commons License

Copyright Comentsys © 2009 - 2010, All rights reserved. About | Contact | Link to Page
Valid XHTML 1.1! Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 This website is ICRA rated Creative Commons License