Silverlight with Windows Phone 7 – An introduction

In this tutorial I aim to introduce you to Silverlight development on Windows Phone 7. To help achieve this aim we will create a simple application that will allow you to get the BBC News Top Stories RSS feed and display them for easy browsing. It will also include the ability to click on a story of interest to read it in full on their website.

Requirements

To develop with Silverlight for Windows Phone 7 you will need a few things installed.

NOTE: You should install these applications in the order they are shown below.

• Visual Studio 2010 Express or greater.
• Windows Phone Developer Tools 7.0
  • http://download.microsoft.com/download/1/7/7/177D6AF8-17FA-40E7-AB53-00B7CED31729/vm_web.exe (This is the Windows Phone SDK)
  • http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32-2DFC41917B11/WindowsPhoneDeveloperResources_en-US_Patch1.msp (This is the Windows Phone Developer Tool January 2011 Update)
  • http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32-2DFC41917B11/VS10-KB2486994-x86.exe (This is the Windows Phone Developer Tools Fix)

You will also need:

• A knowledge of WPF.
• A knowledge of how to use visual studio (creating projects, adding classes etc).
• A knowledge of C# will be helpful but is not a major requirement as it is pretty easy to learn.

Creating the Application

Now you have all the tools you need installed you’re ready to get developing.

Open visual studio 2010 and create a new Windows Phone 7 Application.

Now we have a project set up you should be presented with a screen similar to this.

The left panel shows you visually how your application looks through a WYSIWYG editor and the right panel shows you the XAML editor that creates what you are seeing on the left. To add controls and change properties you can use either of the panels. For adding controls using the left panel you use the Toolbox and for adding controls using the right panel you type them out. We will be typing the controls out into the XAML editor directly.

Moving Along

Now everything is setup and you understand what you are looking at the first thing we want to do is add a reference to the project. The reference we need to include is System.Xml.Linq, this will be used later when we start actually writing some code.

The next thing to do is to remove the text at the top of the application that says “MY APPLICATION”. To do this, simply click on the text in the left panel and hit delete. When you deleted the control you may have seen the line related to the control be removed from the XAML in the right panel, if not don’t worry it is not important I am just pointing out that whatever you do to one of the panels the operation is reflected in the other.

Seeing as we are going to be using the XAML editor (the right panel) instead of the WYSIWYG editor (the left panel) we may as well make the XAML editor nice and big and hide the WYSIWYG editor.

To do this locate the button that looks like this

It can typically be found here (highlighted)

After you have clicked it the window will now look as follows.

Notice that I have highlighted buttons on the right hand side of the above image. To view the XAML editor simply click the one that is not currently selected (see image below for what the button will look like)

By using the two buttons that were highlighted above you are able to flick back and forth between the WYSIWIG editor and the XAML editor.

So we now have the XAML editor front and centre, so we can now add our List Box control. To add this we first need to find the correct location we want it to show. We will add it into a pre-existing grid that was created when we created the project, so in the XAML editor look for this line of XAML.

<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>

Now you have located the line we will add our List Box control. To do this we need to add the following XAML between the Grid tags.

<ListBox x:Name=”lstFeed”>

</ListBox>

Your XAML should now look like this

<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<ListBox x:Name=”lstFeed”>

</ListBox>

</Grid>

Ok so if we were to compile and run this now we would not see anything apart from the text at the top of the application that says “page name”. This is because we need to actually add some content to our List Box.

So if we right click within the XAML editor panel and select “View Code” the C# code that supports our application will be shown to us.

Do you remember adding the reference to System.Xml.Linq earlier?  Well this is where you need to use it. All you need to do is add using System.Xml.Linq at the top of the page (where the rest of the using statements are declared).

We now need to create a new class that will hold news feed item’s. Add a class to the project called NewsItem.cs. The class should look like so.

public class NewsItem
{
//GUID of the news item.
public string GUID { get; set; }

//Title of the news item.
public string Title { get; set; }

//Description of the news item.
public string Description { get; set; }

//Web link to the news item.
public string Link { get; set; }

//Date and time the news item was published.
public string Date { get; set; }

//Image location for the news item’s thumbnail image.
public string Image { get; set; }
}

Now that we have a class to take care of our news items we can go back to the main application code and get cracking.

Firstly we will create the WebClient, the WebClient is used to download the RRS feed. The following code needs to go in to the constructor.

//WebClient object that will be used to download the RSS feed.
WebClient getFeed = new WebClient();

//Add the event handler that will be called when the download has completed and the RSS feed has been downloaded
getFeed.DownloadStringCompleted += new DownloadStringCompletedEventHandler(getFeed_DownloadStringCompleted);

//Start the download on the URL that is passed to it (this is the BBC News Top Stories feed)
getFeed.DownloadStringAsync(new Uri(“http://feeds.bbci.co.uk/news/rss.xml”));

We now need to add the function that will be called when the DownloadStringCompleted event is fired. To do this the following code needs to be added.

void getFeed_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
If(e.Result != null)
{


}
}

Now we have the skelton structure of the event, we now need to put the code in that will actually do the work.

You will have noticed in the above function that there is an if statement that checks to see if e.Result is not empty. We have this check to make sure that the download went according to plan and actually got some data. It is within this if statement that we will add the rest of the code needed for the application.

NOTE: This if statement does not check to make sure the data is exaclty what we expected, a future enchancement can be made here to verify the data (look at the “Wrap Up” section for ideas of how this program could be improved).

The following code should be added between the if statement stated above in the getFeed_DownloadStringCompleted function.

//Create the XDocument by passing in the result string we received (this //is the actual XML of the BBC’s RRS feed).
XDocument doc = XDocument.Parse(e.Result);

//As the BBC’s RRS feed uses namespaces for images we need to create this //namespace variable for use in the linq query.
XNamespace serv = “http://search.yahoo.com/mrss/”;

//Perform a linq search on the XML document to get all the news stories //that have a thumbnail image width of 66px. The constructed data is //stored in the data variable.

var data = from query in doc.Descendants(“item”)
where (int?)query.Element(serv+”thumbnail”).Attribute(“width”) == 66 //Casting as an int? allows the query to //deal with null values
//Create a new NewsItem for each record that is found
select new NewsItem
{
//Setup each of the properties by getting there corresponding
//element from the XML.
GUID = (string)query.Element(“guid”),
Title = (string) query.Element(“title”),
Description = (string) query.Element(“description”),
Link = (string) query.Element(“link”),
Date = (string) query.Element(“pubDate”),
Image = (string)query.Element(serv+”thumbnail”).Attribute(“url”).Value??”" //If the image is null then just //write a default empty string.
};

//Bind the data retrieved from the XML document to the List Box we created
//earlier.
lstFeed.ItemsSource = data;

So we are good to go right? Not quite, if you run the app now you would get a result similar to this.

You may be think “Wait, where are the actual news stories and images?” It’s quite simple really, currently we are passing in a list of news items and the List Box control has no idea how to display them so it just display’s the object type of what they are.

To correct this issue we need to go back to the XAML editor and add a List Box Item Template. By doing this when we pass a NewsItem object to the List Box it will know how to display correctly.

Firstly we need to find the List Box XAML we added previously (we called it lstFeed). Now that we have located it we need to add the following code in between the open and close tags.

<!–State that we are making an item template–>
<ListBox.ItemTemplate>
<!–Declaring the data template gives use the ability to replace the visual appearance of the default data item (which is just one text block which performs a ToString() operation on the objects you pass to it; This is why we received the result above when we tried to run it previously as it used the default data template)–>
<DataTemplate>

<!–The stack panel in WPF is used to stack its child elements below or besides each other depending on its orientation. Below it is stacking them vertically by default–>
<StackPanel>

<!–A grid allows you arrange it children controls in a tabular structure of rows and columns. It is similar to a HTML table but it is more flexible. Here we set up a grid that will hold the needed controls to display our news items.–>
<Grid Width=”480″>

<!– Here we define the columns and there widths. One column is for the image, the other for the text controls. Column definitions start as 0 so the first column is 0 the second is 1 etc–>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”66″></ColumnDefinition>
<ColumnDefinition Width=”400″></ColumnDefinition>
</Grid.ColumnDefinitions>

<!–Here declare the control that will show the image and bind the Image property from the new item class to it. Whenever a news item object comes in it will know that the source is to be taken from the Image property. We also set the width and height of the control and tell the control to show in the first column of our grid–>
<Image Name=”txtImage” Source=”{Binding Image}” Width=”144″ Height=”81″ Grid.Column=”0″ ></Image>

<!–Here we create a new Grid that will hold the controls to display the text of the news item. We also assign it to be placed in the second column of the initial grid we created (remember the columns start at 0 so 1 is the second column.–>
<Grid Grid.Column=”1″>

<!–Create the needed row definitions for the controls. The rows height is declared as Auto so it can take as much or as little as it needs. The rows work the same way as the columns in the fact that they start at 0, so the first row is 0 and the second is 1 etc–>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”></RowDefinition>
<RowDefinition Height=”Auto”></RowDefinition>
<RowDefinition Height=”Auto”></RowDefinition>
<RowDefinition Height=”Auto”></RowDefinition>
</Grid.RowDefinitions>

<!–This is a hyperlink button control, we use it to display the title of news items and also to link to the actual news article on the BBCs website. Here I have set it to open in a new browser window and made the text align to the left as well as setting the font to be 22px. Again I perform binding for the content it shows (like what we done for the image control) but this time we bind the Title as the text to show and we also have another bind that binds the link to the navigation uri. We also assign the control to the first row and have the height set to auto and the width set to 390 –>
<HyperlinkButton Name=”txtDescHyper” Margin=”0″ TargetName=”_blank” HorizontalContentAlignment=”Left” FontSize=”22″ Content=”{Binding Title}” Grid.Row=”0″ NavigateUri=”{Binding Link}”  Height=”Auto” Width=”390″></HyperlinkButton>

<!–This is a text block control and we use it to show the description of the news item. Again I perform a bind so the text that is displayed is the description. I also set the control to be assigned to the second row and set the text wrapping property to wrap, this allows the text block to be multiline. The height, width and font size are also set.–>
<TextBlock Name=”txtTitle” Text=”{Binding Description}” Grid.Row=”1″ TextWrapping=”Wrap” Height=”Auto” FontSize=”20″ Width=”390″></TextBlock>

<!–This is a text block control and we use it to show the date that the news item is from. I perform a bind here so the text that is displayed is the date of the news item object and I assign the control to show in the third row. I also assign the height and width and text wrapping property again.–>
<TextBlock Name =”txtDate” Text=”{Binding Date}” Grid.Row=”2″ TextWrapping=”Wrap” Height=”Auto” Width=”390″></TextBlock>

<!–This closes the grid that contains the display controls–>
</Grid>

<!–This closes the grid the grid that encompasses all of the controls and the secondary grid.–>
</Grid>

<!–Here I create a line to add a space between each news item object. This is done so the stories don’t look as if they just merge into one.–>
<Line Name=”seperator” Fill=”AliceBlue” Height=”10″ Width=”400″ Visibility=”Visible”></Line>

</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Now if we run this you should hopefully see something similar to this:

All that is left to do now is to change the text at the top of the page to something more appropriate. To do this look at the XAML editor and find a control named “PageTitle” then simple replace its text properties contents with “BBC News Feed” and set its font size to 64 so the new text is fully visible.

Now if you run the app you should have something similar to this:

Wrap Up

As you have seen it is very easy to get started with Silverlight on Windows Phone 7 and you now have a simple application to read the feeds of the top news stories from the BBC. However, there is room for improvement.  I hope you have learned something from this tutorial and please feel free to leave questions in the comments section.

Below are some thoughts on what you could do to improve the app:

• More error checking and validation. At the moment the application is very barebones and a number of possible errors lay in wait. To combat this checks should be done throughout the code to ensure the integrity of the data being loaded.

• Limit data usage. Currently the application makes a request for the RSS feed every time you enter the application,  even when you go to read a full news story and come back to the application. To combat this you can investigate tomb stoning and saving to isolated storage.

• Make it use a panoramic control so you can show many different types of RSS news feeds. With this a user could simply swipe left and right to be presented with new information related to more specific news feeds such as Technology, UK, England etc. The BBC has many RSS news feeds so take a look to get some more information. (http://www.bbc.co.uk/news/10628494)

Tags: silverlight, tutorial, Windows Phone 7, WP7, wpf