Windows Phone 7 Development : Adding a WebBrowser Control

1. Introducing the WebBrowser Control

The most obvious reason to use the WebBrowser control is to display web content within the page of a Windows Phone 7 application. For instance, you may be developing an application that shows Twitter feeds in a portion of the screen. The easiest way to do this would be to create a WebBrowser control in the application and navigate to a given Twitter page from within that control.

Another reason to use the WebBrowser control may be to show HTML-formatted content that resides locally on Windows Phone 7. For example, if you decide to include help files with your application, the easiest way to create those files would be in the form of HTML web pages. Then, you can load those web pages in Windows Phone 7 and display them in the WebBrowser control.

Finally, you can use WebBrowser content that Windows Phone 7 application generates on the fly. That means that you can compose an HTML page dynamically in code and, without first writing that web page out to disk, display it. This is certainly a handy feature that avoids the intermediate steps of first writing an HTML file to local storage and then reading it. This feature is important when the HTML pages you want to show the user are context-sensitive: for instance, if you are developing an application that tracks basketball teams and you want to provide links to information about each individual player on the team, you will want to build your list of players based on the name of the team the user selects. Dynamic content generation allows you to do just that.

In this article, you'll learn how to use these capabilities in an application by building a simple car browser application that can search the web for photos of popular car models and display them. To get started, you first must create a main page and add some UI, including a WebBrowser control to display web and HTML content.

Before you can use the WebBrowser control to browse for the images of cars online, you need to first add the control to your application. Follow these steps to place the WebBrowser control inside your application.

1. Create a new Windows Phone 7 Application project. Launch Visual Studio 2010 Express and select the Windows Phone Application template, then change the Project name to "WebBrowserSample," select OK, and Visual Studio will set up a new project.

2. Click the View menu => Other Windows => Toolbox (alternately, you can also click the Toolbox icon in the Visual Studio application bar).

3. From the Toolbox window on the left, select the WebBrowser control, click it, and drag it onto the Windows Phone 7 design surface, as shown in Figure 8-1.

4. Position and resize the control as needed. In Figure 1, the WebBrowser control is positioned to take the upper third of the phone screen.

5. Finally, change the name of the application from "My Application" to "My Car Browser" and change the name of the page to "Car Explorer." You can do that by double-clicking MainPage.xaml and editing the ApplicationTitleand PageTitleelements accordingly.

NOTE

You can set the Height and the Width properties to Auto (this is the default when the control is first dropped on the Windows Phone design surface and is not resized). You can also set the Horizontal Alignment and Vertical Alignment properties to Stretch, which will allow the browser window to expand as much as possible on the phone without covering other visible elements present on the phone screen.

With the WebBrowser control in place, you are now ready to look at how to use this control for each of the scenarios previously described.

Figure 1. To add the WebBrowser control to the application, drag it from the Toolbox and drop it onto MainPage.xaml on the Windows Phone 7 design surface.