Home > DeveloperSection > Articles > WebBrowser Control in Windows 7 Phone Development

WebBrowser Control in Windows 7 Phone Development

Posted by  Arun Singh
on    April-14-2012 16:19 PM

Windows Phone Windows Phone 
Ratings:
0 Comment(s)
 3922  View(s)
Rate this:

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

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

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

        </StackPanel>

 

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

        </Grid>

    </Grid>

 

 Code of MainPage.xaml.cs:

using System;

using System.Windows;

using Microsoft.Phone.Controls;

 

namespace webBrowserDemo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

 

        private void btnGo_Click(objectsender, RoutedEventArgse)

        {

            string strUri=txtSearch.Text;

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

            webBrowser1.Visibility=System.Windows.Visibility.Visible;

        }

 

      

    }

}

 

 

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.


Recent Activities

Manoj Pandey added new Article Interface in Java   12 hours ago

Mayank Tripathi Created New Discussion Sub events in FullCalendar   yesterday


Mayank Tripathi added new Question What is interface?   15 days ago

Don't want to miss updates? Please click the below button!