31 Days of Windows Phone | Day #18: WebBrowser Control

This post is Day #18 in a series called the 31 Days of Windows Phone.

For the past two days, we have been talking about different display controls: Panorama and Pivot.  Today, we’re going to focus on another important control, the WebBrowser.

What does the WebBrowser control do?

If it’s not obvious, the WebBrowser control lets your user browse a specific web page.  But it’s not a full browser, because it doesn’t come with an address bar, favorites, tabs, etc.  It’s probably best think of it as an <iframe> from the HTML world, but with a much richer interface.  You’ll discover that pinch (and double-tap) to zoom, as well as panning and scrolling are automatically built in, without any work on your part.

One other awesome feature of this control is that it can load both local and web content.  This means that if I’ve got a ton of HTML assets (documentation, maybe?), I don’t have to re-create all of that content again for my application.  Instead, I can embed those HTML pages in my application, and load them locally on the phone rather than relying on a potentially spotty data connection.

Loading local HTML content in the WebBrowser control

Since I brought it up, I should probably show you how to so it too, right?  First, you need some local HTML files added to your project.  I have added two for demonstration purposes, but this could be hundreds if you needed that.


After that, I rigged up two buttons to load these individual files.  Again, there are many different approaches you can take to this, but I want to make sure that you walk away from this article confident you can load local content, and I’ll leave it to you to find the best way to leverage my examples.  In my code below, there are two additional references (“using statements”) you’ll need to make.  They are:

using System.IO;
using Microsoft.Xna.Framework;

You may be thinking, “XNA?  Really?”  I’m here to tell you that on Day #30 of this series, I’m going to show you just how powerful the XNA namespaces can truly be.  For now, just trust me.  In my button event handlers, I have two lines of code.  The first loads the contents of the HTML into a StreamReader, and the second line loads the contents of the HTML file into the WebBrowser control using its .NavigateToString() method.  Here’s what it looks like:

StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));

If you’d like to read up on the System.Xna.Framework, or the TitleContainer class, click on their respective links in this sentence.  Using this simple example above, however, will allow you to load local HTML content directly into your WebBrowser control.

Scripting is disabled by default

In case you’re planning on loading an HTML page that contains some JavaScript, you should know that scripting is disabled in the WebBrowser control by default.  It’s simple to turn back on (or even toggle) using the IsScriptEnabled property of the control.  Here’s two quick examples:


<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />


Browser.IsScriptEnabled = true;

Talking Between Your App and Script

If you want to be able to leverage the scripting that you have on your HTML content, it’s pretty easy to do.  If you want to pass data from your app to the page, you can simply use the .InvokeScript() method, passing the name of the script method, followed by any arguments the method expects:

string returnValue = (string)Browser.InvokeScript("getText", "http://jeffblankenburg.com", "rocks", "awesomely");

To do the opposite, you need one extra step: an event handler for when the a script wants to talk to you.  To do this, I set up the .ScriptNotify event handler, and grab the string it passes to me (in my case, it’s a URL that I will navigate to).  The NotifyEventArgs.Value contains the value the script passes me:

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
	Browser.Navigate(new Uri(e.Value, UriKind.Absolute));

Once you’ve got that set up, it’s one simple line of Javascript to make that event fire:


Because you’re loading network content most of the time, you need to let your user that something is happening.  This seems like a perfect opportunity to talk about the ProgressBar, and how we can use it to show the user that we’re loading something, and that they should be patient.

Using the ProgressBar with the WebBrowser control

There is TONS of information about the ProgressBar at MSDN, so I’m not going to cover all of it.  What I will do, however, is show you how to create a simple “waiting” animation for your user, so that they know you’re loading content.  By using the ProgressBar in the example below, we just need to set IsIndeterminate = true, and show and hide it at the appropriate times.  Here’s the XAML and C# I use to do this:


<ProgressBar Foreground="Orange" x:Name="ProgBar" Visibility="Collapsed" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Top" Width="460" />


void Browser_Navigating(object sender, NavigatingEventArgs e)
	ProgBar.Visibility = Visibility.Visible;

void Browser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
	ProgBar.Visibility = Visibility.Collapsed;

You’ll see that I can use the Navigated and Navigating event handlers to show the ProgressBar to the user at the appropriate times, and hide it otherwise.  Check out the code sample below to see all of this in action!

Download the Code

Today we covered the WebBrowser control in depth, but as with all of my examples, until you can take some working code apart, and see how it works, it’s hard to fully realize what you’re working with.  So do it!  Download this example, and figure out how to add it to your project.


9 thoughts on “31 Days of Windows Phone | Day #18: WebBrowser Control

  1. Hi, thanks for the wonderfull tutorials! I have a short question about combining the Pivot and a Webbrowser: if you have a webbrowser in one of the pivot panes, it is not possible to swipe the pane because the browser catches the screenpresses. Any idea on how to solve this? Thanks!

  2. What if the source HTML includes hyperlinks to images in the same project. How would it be able to find those?

  3. This is the true joy in life, the being used for a purpose recognized by yourself as a mighty one the being thoroughly worn out before you are thrown on the scrap heap the being a force of Nature instead of a feverish selfish little clod of ailments and grievances complaining that the world will not devote itself to making you happy.

  4. Hello,

    this did not work for me😦
    When i click in URLButton give me
    An unknown error has occurred. Error: 80020006.

    Read this http://forums.create.msdn.com/forums/p/70816/432021.aspx

    When i call NavigateString() and then Dispatcher the result is null, if i call the dispatcher again the result is not null….but i did not like.

  5. Hi Jeffblankenburg,

    Could you please help me , how I can programmatically increase the font size of web browser . I need this to implement the zoom functionality in web browser control. Many thanks

  6. This article was very helpful for me in order to show Indeterminate progress bar while loading web content.

    Thank you very much!

  7. Hi, thanks for the wonderfull tutorials! I have a short question about getting images from web Server and display images in the webBrowser . Any idea on how to solve this? Thanks!

  8. Hi,

    Congrats for such great article.

    I would like to know how can we filter elements of a web page as we used to do in windows?

    Example : –

    New web browser control will not allow to access Document property.

    Do we need to write everything as a complete javascript and call it here?

    seeking for tips or example


Leave a Reply

Fill in your details below or click an icon to log in:

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