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)
 3150  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


Sumit Kesarwani added new Question What is the Vector class in java?   2 days ago

Anchal Kesharwani added new Blog JSON Syntax   8 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   8 days ago

Top Contributors

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