WebBrowser Control in Windows 7 Phone Development

The most obvious reason to use the WebBrowser control is to display web content within the page of a Windows Phone 7 application. For instance, you may be developing an application that shows Twitter feeds in a portion of the screen. The easiest way to do this would be to create a WebBrowser control in the application and navigate to a given Twitter page from within that control.

This article is going to explain how to use WebBrowser control in Windows 7 phone development. Let’s see a brief demonstration on it.

Getting started:

1.       Open Visual Studio

2.       Create new Silverlight Windows 7 Phone Development Project

3.       Enter your project Name

4.       Click on button ‘Ok’

WebBrowser Control in Windows 7 Phone Development

Now drag and drop WebBrowser control in ‘MainPage.xaml’ design interface and set some properties of WebBrowser control.

WebBrowser Control in Windows 7 Phone Development

Now write down the following to code to build up above layout.

Code of MainPage.xaml:

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

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


            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>



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

            <TextBlock x:Name="PageTitle" Text="WebBrowser Demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="40" />



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

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

            <phone:WebBrowser HorizontalAlignment="Left" Margin="0,74,0,0" Name="webBrowser1" VerticalAlignment="Top" Background="#FF64E5E5" DataContext="{Binding}" Height="603" Width="456" AllowDrop="False" />

            <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="348,6,0,0" Name="btnGo" VerticalAlignment="Top" Width="102" FontSize="22" Click="btnGo_Click" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="6,6,0,0" Name="txtSearch" Text="" VerticalAlignment="Top" Width="336" />




 Code of MainPage.xaml.cs:

using System;

using System.Windows;

using Microsoft.Phone.Controls;


namespace webBrowserDemo


    public partial class MainPage : PhoneApplicationPage


        // Constructor

        public MainPage()





        private void btnGo_Click(objectsender, RoutedEventArgse)


            string strUri=txtSearch.Text;

            webBrowser1.Source=new Uri(strUri, UriKind.Absolute);









Now execute your application; following output will be appearing.

WebBrowser Control in Windows 7 Phone Development

Now click on button ‘Ok’.

WebBrowser Control in Windows 7 Phone Development

This is the complete description of WebBrowser control in windows phone development.  I hope you will enjoy it. Thanks for reading this article.

Leave Comment