How to Create Web Browser Control in Windows Phone

Web Browser Control

By using this control you can access any website like a normal browser.

In this article I will demonstrate how to create a Web Browser control on a page in Windows Phone and for this I am using Microsoft Visual Studio Express 2012 for Windows Phone.

So let’s start the work.

Step 1: Create a new project named WebBrowserApp and click the "OK" button.



Step 2: Select the Operating System Version or Windows Phone Platform you want to target your project for and click the "OK" button.



Step 3: Add some code to the Grid tag named "ContentPanel" like TextBox and Button with some properties.

TextBox

  • Name: Name of the TextBox like "txt1" in this article.
  • HorizontalAlignment: Alignment of TextBox horizontally like left, right and middle.
  • Height: Height of the TextBox.
  • Margin: Defines the position of the TextBox.
  • TextWrapping: Wrap the Text in a TextBox.
  • VeticalAlignment: Alignment of TextBox vertically, like top, bottom and middle.
  • Width: Width of TextBox.

    <TextBox Name="txt1" HorizontalAlignment="Left" Height="72" Margin="10,10,0,0" 
    TextWrapping="Wrap"  VerticalAlignment="Top" Width="356"/>

Button

  • Name: Name of the button like "btn_Go"in this article.
  • Content: Text that will display on the button.
  • HorizontalAlignment: Alignment of TextBox horizontally like left , right and middle.
  • Margin: Defines the position of the TextBox.
  • VeticalAlignment: Alignment of TextBox vertically.

    <Button Name="bt_Go" Content="Go" HorizontalAlignment="Left" 
    Margin="366,13,0,0"  VerticalAlignment="Top"/>

Step 4: Select the Web Browser control from the Toolbox on your page and put it below the button.



WebBrowser

  • Name: Name of the control like "Browser1"in this article.
  • HorizontalAlignment: Alignment of TextBox horizontally, like left, right and stretch.
  • Margin: Defines the position of the control.
  • Width: Width of the control.

    <phone:WebBrowser Name="Browser1" HorizontalAlignment="Stretch" Margin="16,110,0,32"
    Width="420" />

Step 5: Create a "Click" event in the button control to write the code in the .cs file.



And add some code to the .cs file on the button click event as in the following:

  • Object of a URI that accepts the path of the website by the TextBox and UriKind that can be Relative/Absolute/RelativeOrAbsolute.
  • Access the method "Navigate" of the WebBrwoser Control and pass the URI object into it.



Step 6: Run the application and type the URL like "http://google.com". Press the GO button to see the output.