How to Utilize Web Browser Control in Windows Phone 7

Introduction to Web Browser Control

With the help of this article, our focus will be on to gain the knowledge as to how to utilize Web Browser control in Windows phone 7 developments. What is the role of Web Browser control in Windows Phone 7? The primary responsibility of Web Browser control in windows phone 7 is deployed so as to access the static content or a web based content depending on the requirements of the development.

Web Browser control is something that is actually new in Windows Phone 7. For the reason that there is only one platform in the form of internet explorer in the Windows Phones, it is a good thing that the browser functionalities can be used in the applications of our device. This is the best choice in order to enhance the usability.

There can be plenty of ways that can be making use of in order to utilize this control in our windows phone 7 developments. The example of the same includes the generating dynamically an HTML code and then displaying it as a page. The other thing that we can do is to exhibit a static page that is actually saved in altogether an Isolated Storage or rather saving the page to an isolated storage.

We will now start with the step by step guide to see the process on how we can make use of or deploy the Windows Phone 7 Web Browser control.

Steps

The very first step would be open Visual Studio and start creating a new Silverlight for Windows Phone 7 application. This should be done with a valid project name as can be seen from the below screenshot.

Figure 1: Representing the Visual Studio introducing New Project

We will see now the Windows Phone 7 designer and XAML windows which will help us to begin designing our application. Let us initiate our learning with directly drag and drop the Web Browser control that can be done from the Visual Studio Tool Box and re-size it. This is shown in the below screen.

Figure 2: Representing the Visual Studio Tool Box

Listing 1: XAML Code

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MRBOOL" Style="{StaticResourcePhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResourcePhoneTextTitle1Style}"/>
</StackPanel> 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <phone:WebBrowser HorizontalAlignment="Left" Margin="9,121,0,0" Name="webBrowser1"VerticalAlignment="Top" Height="475" Width="441" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="-4,22,0,0" Name="textBox1"Text="TextBox" VerticalAlignment="Top" Width="380" />
    <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="371,22,0,0"Name="button1" VerticalAlignment="Top" Width="85" />
</Grid>

We will add a code behind now so as to access a web site by providing the URL. The Source property of the Web Browser Control needs to be used in order to assign the URI to redirect the user on accessing the button. Apart from this we can apply a substitute process of making use of the Navigate(URI) feature or property in order to do the same task as above with the help of the below screen.

Listing 2: Code Behind

private void button1_Click(object sender, RoutedEventArgs e)
{
string strURI = textBox1.Text.ToString();
webBrowser1.Source = new Uri(strURI, UriKind.Absolute);
//webBrowser1.Navigate(new Uri(strURI, UriKind.Absolute));
}

Figure 3: Representing the Navigate (URI) feature or property

Let us see what the output appears in the Windows Phone 7 Emulator when we run the application. At this point you just need to press F5 to build and execute the project and the result can be seen as shown in the below screen.

We will learn now to create a dynamic html and then the process to map it to the web browser control so as to load the html content as a static page. The first step would be to add a new page and then the web browser control to that much in a similar way like we did above. Post adding the controls in order to load the html, the screen will be seen as below.

Listing 3: XAML Code

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MRBOOL" Style="{StaticResourcePhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResourcePhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <phone:WebBrowser HorizontalAlignment="Left" Margin="9,6,0,0" Name="webBrowser1"VerticalAlignment="Top" Width="441" Height="595" />
</Grid>

Figure 4: Representing the screen post adding the controls

The next step is adding the code in order to load the HTML content making use of the WebBrowser_onloaded event and can be figured out from the below code. The task of the code is to take the static html content and load it to the web browser control. Now add the below code to the code that is present behind of the page. This is done in order to load any static HTML page as per the requirement.

Listing 4: Code Behind

public WebBrowserPage2()
{
InitializeComponent();
webBrowser1.Loaded += WebBrowser_OnLoaded;
}
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
webBrowser1.NavigateToString("<html><head><meta name='viewport' content='width=480, user-scalable=yes' /></head><body><h2>Welcome to MrBool!
</h2>
</body></html>");
} 

Figure 5: Representing Class development

We will now execute or run the application and it can be seen that the Web Browser control loads the static html content. We just need to press the button F5 and the output can be seen in the Windows Phone 7 Emulator as can be seen from the below screenshot.

Figure 6: Representing the Output

Conclusion

The article here has tried to explain the process on how to utilize the Web Browser Control so as to work with the Windows Phone 7 application development.