Every one must have header about the panorama control available for the Windows Phone 7 applications. But have you created an app using it? Let’s begin creating a simple news reader app using the panorama control.

At first, create a panorama application project in Visual Studio 2010. This adds a lot of files to your project, you may choose to just modify than or add your own files. The basic structure that VS 2010 creates for you is perfect for this app. Let us first concentrate on the UI design.

The app will have two panorama screens, the first one will display the top stories, while the other will show a list of news categories for the user to choose.

Every panorama screen has a title, that identifies what the screen is about or what you can expect it to have. I would be naming my screen “top stories”. You might wonder why the lower case, well that’s what most of the WP7 apps have titles, all in lower case.

The content of the screen is pretty straight forward, it contains a list box display all the news stories.

<!–Panorama item one–>
PanoramaItem Header=”top stories”>

<ListBox ItemsSource=”{Binding TopStories}” SelectionChanged=”MainListBox_SelectionChanged”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding Title}” TextWrapping=”Wrap” Style=”{StaticResource PhoneTextTitle2Style}”/>
<TextBlock Text=”{Binding PublishedDate}” TextWrapping=”Wrap” Margin=”12,5″ Style=”{StaticResource PhoneTextSmallStyle}” FontStyle=”Italic”/>
<TextBlock Text=”{Binding Description}” TextWrapping=”Wrap” Margin=”12,2″ Style=”{StaticResource PhoneTextSubtleStyle}”/>

<!–StackPanel>–>

</DataTemplate>

<!–ListBox.ItemTemplate>–>

<!–ListBox>–>

<!–PanoramaItem>

When the user selects any item in the list box, the user would be redirected to the browser display the entire article.  Following code accomplishes this task for you.

// Handle selection changed on ListBox
private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

ListBox MainListBox = sender as ListBox;
// If selected index is -1 (no selection) do nothing
if (MainListBox.SelectedIndex == -1) return;

Microsoft.Phone.Tasks.WebBrowserTask tsk = new Microsoft.Phone.Tasks.WebBrowserTask();
tsk.URL = ((MainListBox.ItemsSource as IList)[MainListBox.SelectedIndex] as RssItem).Url;
tsk.Show();

// Reset selected index to -1 (no selection)
MainListBox.SelectedIndex = -1;

}

In the above code, I have created a new Web Browser task which displays a web browser with the specified Url. It is an equvivalent of copying the feed url manually into the address bar of the web browser application in the phone.

The second screen is again fairly similar, with one exception, in place of news stories, it is a list of categories.

<!–Panorama item two–>
<controls:PanoramaItem Header=”categories”>

<ListBox x:Name=”CategoriesListBox” Margin=”0,0,-12,0″ ItemsSource=”{Binding CurrentProvider.FeedUrls}” >

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text=”{Binding Key}” TextWrapping=”Wrap” Style=”{StaticResource PhoneTextExtraLargeStyle}”/>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PanoramaItem>

This list box will also hookup with the selection changed event, the only difference, it would open up another page. This is what that page looks like.

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

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”NEWS READER” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”page name” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

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

<ListBox ItemsSource=”{Binding SelectedFeed}” SelectionChanged=”FeedListBox_SelectionChanged”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding Title}” TextWrapping=”Wrap” Style=”{StaticResource PhoneTextTitle2Style}”/>
<TextBlock Text=”{Binding PublishedDate}” TextWrapping=”Wrap” Margin=”12,5″ Style=”{StaticResource PhoneTextSmallStyle}” FontStyle=”Italic”/>
<TextBlock Text=”{Binding Description}” TextWrapping=”Wrap” Margin=”12,2″ Style=”{StaticResource PhoneTextSubtleStyle}”/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</Grid>

If you pay a attention, this xaml is exactly similar to that of the first panorama screen. The only difference is that this is a separate page that we navigate to on the selection changed of the Categories List box

Here are some screen shots of the three screens described above:

We have completed our UI, but how will the UI get that right data? Well, for this, I am using the RSS feed provided by many news corporations and print media.

Note: All of the RSS feeds used in this demonstration belong to their respective producers and and their usage is bound by their own terms and conditions. I have used them just for demonstration purposes only.

I have taken their feeds and parsed them into a proper format useful for the app.

public class RssItem
{

public string Description { get; set; }
public string PublishedDate { get; set; }
public string Title { get; set; }
public string Url { get; set; }

public static List GetRssItems(Stream stream)
{

XDocument doc = XDocument.Load(stream);//”SampleData/TopHeadlines.xml”);
var channel = doc.Root.Element(“channel”);
var items = channel.Elements(“item”);
List rssItems = items.Select(item => new RssItem()
{

Title = item.Element(“title”).Value,
Description = item.Element(“description”).Value,
PublishedDate = item.Element(“pubDate”).Value,
Url = item.Element(“link”).Value,

}).ToList();
return rssItems;
}

}

}

To add more complexity, you can choose to have a settings screen that will allow you to choose between different RSS feeds.

This is completely optional and do it if you need to provide more options to the user.

This is what our settings screen looks like.

If any one of you want the entire source code, please send me a request.

Advertisements

2 thoughts on “News reader: Windows Phone 7 Panorama App

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s