Windows Phone 7 development: Using WebBrowser control

In my posting Windows Phone 7 Series development: reading RSS feeds I showed how to read RSS feeds using XmlReader. Although I hoped to start pimping up user interface I found some more work that needs to do be done. In this posting I will show you how to use WebBrowser control to display RSS content. Example solution is also here for download.

WebBrowser control is something new in Windows Phone 7 Silverlight control set. As we have platform with only one and only IE browser (no native code yet, remember) we are happy we can use browser functionality in our applications. I don’t consider WebBrowser control something convenient if we consider usability but as we don’t have any better choice I see no problem using it.

Changes from last posting

Before we start using WebBrowser control I give you short overview of things I ‘ve changed meanwhile:

  1. I made some minor modifications to RSS client so content is read correctly.
  2. I moved feed entries list to application scope so it is available for all pages in my application.
  3. I added new page that displays selected feed entry and updated “Read more” button in main page so it redirects user to feed entry page.

NB! In the end of this posting you will find Visual Studio 2010 solution with my not so outstanding work on this example so far. Feel free to download it and modify it how you like. Don’t forget that this example is my pretty raw playground and don’t expect to find any amazing solutions there because I am complete n00b at Silverlight.

Using WeBrowser control

Windows Phone 7: WebBrowser control displays blog posting You can see the result her eon the image. When user selects blog posting from postings list and clicks “Read more” button then application redirects user to posting page, finds asked posting from postings list and displays content of posting in WebBrowser control.

Currently WebBrowser uses default settings without styles defined by blog. You can still read the posting and if you are connected to internet you can also see images used in selected posting.

Caching of content depends heavily on WebBrowser component and currently I don’t deal with caching and offline reading. In the future versions I will implement this functionality too.

To zoom content in WebBrowser control you can double click on WebBrowser area with your mouse. I hope I can find better and more user friendly zooming solution but at the moment let’s use what we got out of the box.

Code

As a first thing let’s see the code I wrote for “Read more” button.

private void button1_Click(object sender, System.Windows.RoutedEventArgs e)

{

    var item = (FeedItem)listBox1.SelectedItem;

    NavigationService.Navigate(new Uri("/Post.xaml?url=" + item.Link,
                                       UriKind.Relative));

}

This code doesn’t do much. It just gets RSS entry from list and redirects user to posting page using URL of entry as query string parameter.

Here is how content of blog posting is loaded to WebBrowser control. I am really-really sorry for those n00bish guard controls that doesn’t notify users of problems. But at least you get an idea how to load data to WebBrowser control.

void Post_Loaded(object sender, RoutedEventArgs e)

{

    var url = NavigationContext.QueryString["url"];

    if (string.IsNullOrEmpty(url))

        return;

 

    var items = ((App)App.Current).FeedItems;

    if (items == null)

        return;

 

 

    var itemQuery = from i in items

                    where i.Link.Equals(url)

                    select i;

    var item = itemQuery.FirstOrDefault();

 

    if (item == null)

        return;

 

    textBlock1.Text = item.Title;

    webBrowser1.NavigateToString(item.Content);

}

As you can see WebBrowser control is very easy to use. Most of the code in posting page load event deals with asking data and avoiding errors. WebBrowser control required only one line of code to display content to user.

What happens next?

As a next thing I try to play with WebBrowser control more to find out what I can do with it and what cool things are not possible. Also I start investigating local storage to implement offline reading. When some nice fat muse sits on my head with brilliant ideas on fine arts I will deal with UI pimping too.

Download

Download solution files from the download box below. You need Visual Studio 2010 or Visual Studio 2010 Express to use this solution.

GpAspNet_v0.1.0.0.zip GpAspNet_v0.1.0.0.zip
VS2010 | 143KB

No Comments