Download image associated with rss

Question

I'm making an RSS Reader that'll download rss feed from a local news paper. This is what I have managed so far:

Main code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.ComponentModel;

namespace App_Name
{
public partial class MainPage : PhoneApplicationPage
{
    WebClient client = new WebClient();
    BackgroundWorker worker = new BackgroundWorker();
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Set the data context of the listbox control to the sample data
        DataContext = App.ViewModel;
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        // Set up BackgroundWorker and run it
        worker.DoWork += worker_DoWork;
        worker.RunWorkerAsync();
    }

    private void worker_DoWork(object sender, DoWorkEventArgs e)
    {
        Dispatcher.BeginInvoke(() =>
        {
            downloadRSS();
        });
    }

    private void downloadRSS()
    {
        // Download XML
        client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
        client.DownloadStringAsync(new Uri("https://www.vg.no/rss/create.php?categories=125,10,12&keywords=&limit=10"));
    }

    private void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        var RSSdata = from rss in XElement.Parse(e.Result).Descendants("item")
                      select new RSSItem
                          {
                              Title = rss.Element("title").Value,
                              PubDate = rss.Element("pubDate").Value,
                              Description = rss.Element("description").Value
                          };
        newsListBox.ItemsSource = RSSdata;
        var toparticle = RSSdata.ToList()[0] as RSSItem;
        toparticleTextBlock.Text = toparticle.Title.ToString(); // Put the top article into the toparticleTextBlock
    }

    // Load data for the ViewModel Items
    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData();
        }
    }
}
}

RSSItem:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace App_Name
{
class RSSItem
{
    public string Title { get; set; }
    public string PubDate { get; set; }
    public string Description { get; set; }
}
}

MainPage.xaml:

<phone:PhoneApplicationPage 
x:Class="App_Name.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="False">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">

    <!--Panorama control-->
    <controls:Panorama Title="App_Name">
        <controls:Panorama.Background>
            <ImageBrush ImageSource="/Atlantic-Ocean-Sunrise.jpg"/>
        </controls:Panorama.Background>

        <!--Panorama item one-->
        <controls:PanoramaItem Header="">
            <Grid HorizontalAlignment="Left" Height="594" VerticalAlignment="Top" Width="420">
                <Image HorizontalAlignment="Left" Height="594" VerticalAlignment="Top" Width="420"/>
                <TextBlock x:Name="toparticleTextBlock" TextWrapping="Wrap" Text="Storm setter inn over Finnmark fredag kveld" FontSize="48" Margin="0,392,10,10"/>
                <ProgressBar x:Name="loadingProgressBar" HorizontalAlignment="Left" Height="14" VerticalAlignment="Top" Width="420" Value="70"/>
                <TextBlock x:Name="loadingTextBlock" HorizontalAlignment="Left" Height="594" TextWrapping="Wrap" Text="Loading..." VerticalAlignment="Top" Width="420" Margin="10,14,-10,-14"/>
            </Grid>
            <!--Double line list with text wrapping-->
        </controls:PanoramaItem>

        <!--Panorama item two-->
        <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
        <controls:PanoramaItem Header="Top articles">
            <!--Double line list with image placeholder and text wrapping-->
            <ListBox x:Name="newsListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Path=Title}" Foreground="White" FontSize="30"/>
                            <TextBlock Text="{Binding Path=PubDate}" Foreground="Gray"/>
                            <TextBlock Text="{Binding Path=Description}" Foreground="Green" TextWrapping="Wrap"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>
        <controls:PanoramaItem Header="Item">
            <Grid/>
        </controls:PanoramaItem>
    </controls:Panorama>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
        <shell:ApplicationBarIconButton x:Name="refreshButton" IconUri="/Assets/AppBar/appbar.sync.rest.png" Text="refresh"/>
        <shell:ApplicationBarIconButton x:Name="settingsButton" IconUri="/Assets/AppBar/appbar.feature.settings.rest.png" Text="settings"/>
        <shell:ApplicationBarIconButton x:Name="sourcesButton" IconUri="/Assets/AppBar/appbar.favs.rest.png" Text="sources"/>
        <shell:ApplicationBarIconButton x:Name="searchButton" IconUri="/Assets/AppBar/appbar.feature.search.rest.png" Text="search"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

I need to download the images associated with the RSS items, how can I do this? I would also like to bind each item to its article - making it clickable. Would the best approach be to capture it's click and retrieve the selectedItem from the List and from there grab the title and do a search in the list for that? What would you do?

The questions are: -How to download images associated with each article (item) -Bind each item to it's article

Regards, Erik

Answer 1

I managed it like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace App_Name
{
class RSSItem
{
    public string Title { get; set; }
    public string PubDate { get; set; }
    public string Description { get; set; }
    public string Link { get; set; }
}
}

Applied the link like this:

Link = rss.Element("link").Value

    private void newsListBox_Tap(object sender, GestureEventArgs e)
    {
        // newsListBox was tapped, get the item and open the webbrowser
        int selectedItem = newsListBox.SelectedIndex;
        var selectedArticle = newsArticles[selectedItem] as RSSItem;
        var articleLink = selectedArticle.Link;

        // Create the WebBrowserTask
        var wbt = new WebBrowserTask();
        wbt.URL = articleLink;
        wbt.Show();
    }