Binding the Grid to an RSS Feed

The following tutorial will walk you through the process of binding the C1DataGrid control to an RSS feed. Note that in this example, you will be binding the grid to the ComponentOne Buzz RSS news feed. Note that you can substitute another RSS feed in the steps below, if you choose.

Complete the following steps:

1. In Visual Studio, select File | New | Project.

2. In the New Project dialog box, select a language in the left pane and in the templates list select Silverlight Application. Enter a Name for your project, for example "C1DataGridRSS", and click OK. The New Silverlight Application dialog box will appear.

3. Click OK to accept the default settings, close the New Silverlight Application dialog box, and create your project.

4. In the Solution Explorer window, right-click the project name (for example, C1DataGridRSS) and select Add Reference.

5. In the Add Reference dialog box, locate the System.Xml.Linq library and click OK to add a reference to your project.

6. In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

7. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage.xaml. The XAML markup will now look similar to the following:

<c1:C1DataGrid></c1:C1DataGrid>

</Grid>

</UserControl>

Note that the C1.Silverlight.DataGrid namespace and <c1:C1DataGrid></c1:C1DataGrid> tags have been added to the project.

8. If the <c1:C1DataGrid> tag includes existing content, delete it so it appears similar to the following:

<c1:C1DataGrid></c1:C1DataGrid>

9. Give your grid a name by adding x:Name="c1grid" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1grid">

By giving the control a unique identifier, you'll be able to access the C1DataGrid control in code.

10. Add AutoGenerateColumns="True" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1grid" AutoGenerateColumns="True">

This way the grid will automatically generate and display data from the data source.

11. In the Solution Explorer, expand the MainPage.xaml node and double-click the MainPage.xaml.cs (or MainPage.xaml.vb) file to open it in the Code Editor.

12. Add the following import statement at the top of the file:

· Visual Basic

Imports System.Xml.Linq

· C#

using System.Xml.Linq;

13. In the MainPage constructor, add an event handler and set up a WebClient object to read from the RSS feed with the following code:

· Visual Basic

Public Sub New()

InitializeComponent()

Dim client As New WebClient()

Dim uri As New Uri("http://helpcentral.componentone.com/CS/blogs/c1buzz/rss.aspx")

AddHandler client.DownloadStringCompleted, AddressOf client_DownloadStringCompleted

client.DownloadStringAsync(uri)

End Sub

· C#

public MainPage()

{

InitializeComponent();

WebClient client = new WebClient();

Uri uri = new Uri("http://helpcentral.componentone.com/CS/blogs/c1buzz/rss.aspx");

client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

client.DownloadStringAsync(uri);

}

Note that you can substitute another RSS feed for the ComponentOne Buzz feed, if you choose.

14. Add the News class:

· Visual Basic

Public Class News

Public Property Title() As String

Get

Return m_Title

End Get

Set(ByVal value As String)

m_Title = Value

End Set

End Property

Private m_Title As String

Public Property Link() As String

Get

Return m_Link

End Get

Set(ByVal value As String)

m_Link = Value

End Set

End Property

Private m_Link As String

End Class

· C#

public class News

{

public string Title { get; set; }

public string Link { get; set; }

}

15. Add the client_DownloadStringCompleted event handler:

· Visual Basic

Private Sub client_DownloadStringCompleted(ByVal sender As Object, ByVal e As DownloadStringCompletedEventArgs)

Dim xmlNews As XDocument = XDocument.Parse(e.Result)

Dim news = From story In xmlNews.Descendants("item") _

Select New News With {.Title = story.Element("title").Value, .Link = story.Element("link").Value}

c1grid.ItemsSource = news

End Sub

· C#

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

XDocument xmlNews = XDocument.Parse(e.Result);

var news = from story in xmlNews.Descendants("item")

select new News

{

Title = (string)story.Element("title"),

Link = (string)story.Element("link")

};

c1grid.ItemsSource = news;

}

16. Run your application and observe that the grid appears bound to the ComponentOne Buzz RSS news feed:

What You've Accomplished

Congratulations, you've completed this tutorial! In this topic you created a new Silverlight project, added a C1DataGrid control, and learned how to bind the grid to an RSS feed.