Adventures with the Windows Phone 7 WebBrowser Control

  • Article

I have been spending some time recently working with the Windows Phone 7 development tools and thought I’d start blogging more about writing applications for the forthcoming Windows Phone 7 platform.

I was asked a question this morning about how you might display content, embedded within the application assembly, using the WebBrowser control for Windows Phone 7.

We’ll start by creating a new Windows Phone Application within Visual Studio 2010 and then we’ll add the WebBrowser control to the main page, resizing the control to expand it into the available space on the page.

WebBrowserAdventures

All Windows Phone 7 controls derive from the FrameworkElement class, which provides the Loaded event which occurs when the FrameworkElement has been constructed and added to the object’s tree.

Let’s add a small html page to the project and then, within the file properties for the html page, set the Build Action to “Embedded Resource”.

<html>
<body>Windows Phone 7 Rocks!!!</body>
</html>

If we attempt to load Html into the browser, using the WebBrowser controls NavigateToString method before the browser control is in the visual tree, an InvalidOperationException will be thrown advising us that “You cannot call WebBrowser methods until it is in the visual tree.” We’ll therefore add the following code within the event handler for the WebBrowser controls Loaded event.

Assembly assembly = Assembly.GetExecutingAssembly();

using (Stream stream = assembly.GetManifestResourceStream("WebBrowserAdventures.EmbeddedResource.html"))
{
using (StreamReader reader = new StreamReader(stream))
{
string html = reader.ReadToEnd();

        webBrowser1.NavigateToString(html);
}
}

We’ll use the GetManifestResourceStream method to load the embedded html page from the application assembly and then the StreamReader class enables us to read the content of the html file into a string. With the html contained within the string, the NavigateToString method will enable us to render the html in the browser.

Using the Windows Phone 7 emulator we can see the html from the embedded resource displayed within the WebBrowser control.

EmbeddedHtml

While displaying embedded content within the WebBrowser control is very useful it is of course primarily intended to display content from the Web and doing so is as easy as assigning a value to a single property. Within the WebBrowser control, the Source property allows us to assign an instance of the Uri class representing the Uri of the content we’d like to display.

Displaying the Bing site on Windows Phone 7, using the WebBrowser control is as easy as:

webBrowser1.Source = new Uri("https://www.bing.com");

WebBrowserSource

We announced on Monday that the final build of the Windows Phone 7 developer tools will be available on September 16th with the marketplace going live sometime in early October. You can read more about the roadmap to Windows Phone 7 launch and the availability of the final tools here.

I encourage you to take download the tools and start writing a game or application, be part of the Windows Phone 7 experience!