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")); Browser.NavigateToString(reader.ReadToEnd());
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:
XAML
<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />
C#
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:
window.external.Notify("http://jeffblankenburg.com");
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:
XAML
<ProgressBar Foreground="Orange" x:Name="ProgBar" Visibility="Collapsed" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Top" Width="460" />
C#
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.
JEFF BLANKENBURG 
Leave a Reply