WebBrowser Control With ProgressBar in Windows Phone 7

Introduction

In this article we will use a WebBrowser control with customized ProgressBar in a Windows Phone application. Actually, 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 thought of it as an <iframe> from the HTML world, but with a much richer interface. 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. 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 we will use a simple use of a WebBrowser control with a ProgressBar in this phone application.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name of project is "WindowsPhoneApplication"

Step 2 : Add a WebBrowser control to the design page; the following is the customize code of the MainPage.xaml page.

Code

<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Height="494" Width="456" Margin="0,74,0,0" />

</Grid>

Step 3 : The whole code of the MainPage.xaml page is:

Code

<phone:PhoneApplicationPage

x:Class="Day18_WebBrowserControl.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Height="494" Width="456" Margin="0,74,0,0" />

</Grid>

</phone:PhoneApplicationPage>

At the design time the application looks like:

Step 4 : To manipulate the address bar "Go" button Click event, we will customize the source code of the MainPage.xaml.cs file.

Code

void Browser_ScriptNotify(object sender, NotifyEventArgs e)

{

Browser.Navigate(new Uri(e.Value, UriKind.Absolute));

}

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;

}

private void button1_Click(object sender, RoutedEventArgs e)

{

Browser.Navigate(new Uri(Address.Text, UriKind.Absolute));

Browser.IsScriptEnabled = true;

}

Step 5 : The final source code of the MainPage.xaml.cs file is:

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.IO;

using Microsoft.Xna.Framework;

namespace Day18_WebBrowserControl

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

Browser.Navigated += new EventHandler<System.Windows.Navigation.NavigationEventArgs>(Browser_Navigated);

Browser.Navigating += new EventHandler<NavigatingEventArgs>(Browser_Navigating);

Browser.ScriptNotify += new EventHandler<NotifyEventArgs>(Browser_ScriptNotify);

}

void Browser_ScriptNotify(object sender, NotifyEventArgs e)

{

Browser.Navigate(new Uri(e.Value, UriKind.Absolute));

}

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;

}

private void button1_Click(object sender, RoutedEventArgs e)

{

Browser.Navigate(new Uri(Address.Text, UriKind.Absolute));

Browser.IsScriptEnabled = true;

}

Step 6 : Press F5 to run the application.

Output

Click on the address bar:

After clicking the "Go" button the progress bar will be shown on the bottom:

Resources