Mini Browser for Windows 7 Mobile

Objective 

This article will give step to step illustration of creating a simple browser for Windows 7 mobile. 

Step 1

Create a new Windows Phone Application.  From Silverlight for Windows Phone tab select Windows Phone Application project type. 

Step 2

Right click on project and add reference of Microsoft.Phone.Controls.WebBrowser

Step 3

On the XAML page add namespace 

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

Step 4

Design page.

1. Divide content grid in two rows
2. In first row put a textbox and button. 
3. In second row put Web Browser control. 

MainPage.Xaml

<phoneNavigation:PhoneApplicationPage

    x:Class="browserforWin7Phone.MainPage"

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

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

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

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

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

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

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

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->

        <Grid x:Name="TitleGrid" Grid.Row="0">

            <TextBlock Text="Windows 7 Phone" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

            <TextBlock Text="Browser" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

        </Grid>

        <!--ContentGrid is empty. Place new content here-->

        <Grid x:Name="ContentGrid" Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition Height="80"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions> 

            <StackPanel Orientation="Horizontal" Grid.Row="0">

                <TextBox Height="31" Name="textBox1" Text="" Width="404" />

                <Button x:Name="btnGo" Content="GO" Height="70" Width="85" />              

            </StackPanel>

            <wb:WebBrowser x:Name="myBrowser" Grid.Row="1"  Margin="10"/>

        </Grid>

    </Grid>

</phoneNavigation:PhoneApplicationPage>

Step 5

Now in code behind just navigate in click event of button 

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;

namespace browserforWin7Phone

{

    public partial class MainPage : PhoneApplicationPage

    {

        public MainPage()

        {

            InitializeComponent();

            SupportedOrientations = SupportedPageOrientation.Portrait;

            btnGo.Click += new RoutedEventHandler(btnGo_Click);

        }

        void btnGo_Click(object sender, RoutedEventArgs e)

        {

            Uri uri = new Uri(textBox1.Text, UriKind.Absolute);

            if (uri != null)

                myBrowser.Navigate(uri);

        }

    }

}

Press F5 to get the output. In textbox give the site URL and press GO button. 

I hope this article was useful. Thanks for reading. Happy coding.