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 1Create 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=”clrnamespace:Microsoft.Phone.Controls;

 assembly=Microsoft.Phone.Controls.Navigation”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
xmlns:wb=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.WebBrowser”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
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>
<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>
<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

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using Microsoft.Phone.Controls;

   13 namespace browserforWin7Phone

   14 {

   15     public partial class MainPage : PhoneApplicationPage

   16     {       

   17         public MainPage()

   18         {

   19 

   20             InitializeComponent();

   21             SupportedOrientations = SupportedPageOrientation.Portrait;         

   22             btnGo.Click += new RoutedEventHandler(btnGo_Click);

   23         }

   24 

   25         void btnGo_Click(object sender, RoutedEventArgs e)

   26         {          

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

   28             if (uri != null)

   29                 myBrowser.Navigate(uri);

   30         }

   31     }

   32 }

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.

About these ads

2 thoughts on “Mini Browser for Windows 7 Mobile

  1. Pingback: Monthly Report March 2010: Total Posts 14 « debug mode……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s