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

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

   <TextBox x:Name="Address" Text="http://" InputScope="URL" Height="72" HorizontalAlignment="Left" Margin="-12,0,0,0" VerticalAlignment="Top" Width="388" />

   <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="369,0,0,0" Name="button1" VerticalAlignment="Top" Width="99" Click="button1_Click" />

   <ProgressBar Foreground="Green" x:Name="ProgBar" Visibility="Collapsed" IsIndeterminate="True" Height="10" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Bottom" Width="460" />

</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">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--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="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="web browser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

          <TextBox x:Name="Address" Text="http://" InputScope="URL" Height="72" HorizontalAlignment="Left" Margin="-12,0,0,0" VerticalAlignment="Top" Width="388" />

          <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="369,0,0,0" Name="button1" VerticalAlignment="Top" Width="99" Click="button1_Click" />

          <ProgressBar Foreground="Green" x:Name="ProgBar" Visibility="Collapsed" IsIndeterminate="True" Height="10" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Bottom" Width="460" />

        </Grid>

    </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

• How to create Splash Screen with Progress Bar in Windows Phone 7

• How to download file and showing its progress in progress bar
• How to embed HTML file in Windows Phone 7
• Custom WPF Progress Bar