Reader Level:
ARTICLE

Windows Phone WebBrowser

Posted by Raj Kumar Articles | Windows Phone March 02, 2011
This article describes the use of the Windows Phone WebBrowser control.
  • 0
  • 0
  • 8334

This article describes the use of the Windows Phone WebBrowser control. WebBrowser is like a mini browser which displays web content, static web content, dynamically generated web content from the network.

 

Getting Started

Creating a Windows Phone Application:

  1. Open Visual Studio 2010.
  2. Go to File => New => Project
  3. Select Silverlight for Windows Phone from the Installed templates and choose Windows Phone Application
  4. Enter the Name and choose the location.


Click OK. 

 img1.jpg

Image 1.

Now drag and drop a TextBox, Button and WebBrowser control on page. You can set the properties manually.

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

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

            <TextBox Height="78" Text="http://www.c-sharpcorner.com" HorizontalAlignment="Left" Margin="0,15,0,0" Name="textBlock1" VerticalAlignment="Top" Width="383" />

            <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="362,18,0,0" Name="button1" VerticalAlignment="Top" Width="107" Click="button1_Click" />

            <phone:WebBrowser HorizontalAlignment="Left" Margin="12,99,0,0" Name="webBrowser1" VerticalAlignment="Top" Width="438" Height="488" BorderThickness="1" Background="{StaticResource PhoneBackgroundBrush}" >

                <phone:WebBrowser.Foreground>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="White" Offset="1"/>

                        </LinearGradientBrush>

                </phone:WebBrowser.Foreground>

                <phone:WebBrowser.BorderBrush>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="#FF7E2C2C" Offset="1"/>

                        </LinearGradientBrush>

                </phone:WebBrowser.BorderBrush>

            </phone:WebBrowser>

        </Grid>

 

Code Behind.

private void button1_Click(object sender, RoutedEventArgs e)

        {

            string str = textBlock1.Text;

            webBrowser1.Navigate(new Uri(str, UriKind.Absolute));           

        }

 

Now build and run the application. 

If we type wrong website url like this. Then it gives error.

img2.jpg 

Image 2.

 img3.jpg

Image 3.

When we enter website url in the proper format, it shows output like this.

 img4.jpg

Image 4.

Question or comments are most welcome. 

Article Extensions
Contents added by masi boo on Jun 07, 2011
I exactly copy-pasted ur code, but it only shows me white box looks like ur article Image 2. I might doing something wrong. Could you throw some light? compete solution is uploaded. Thanks in advance. 
COMMENT USING

Trending up