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.

Dhananjay Kumar is Developer, Blogger , Speaker, Learner , Mindcracker & Microsoft MVP.

Posted in Windows Phone Dev
2 comments on “Mini Browser for Windows 7 Mobile
  1. Dhara Patel says:

    i m not getting Microsoft.Phone.Controls.WebBrowser dll reference…why ?

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 )

Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories
Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my current or previous employer's view in anyway. © Copyright 2013
Follow

Get every new post delivered to your Inbox.

Join 2,133 other followers

%d bloggers like this: