Introduction
In this article we are going to see how to use
Web Browser control in Windows phone 7 development. Web Browser control in
windows phone 7 is used to access a static content or a web based content based
on the development need. We can use a number of ways to use this control in our
windows phone 7 development like we can use to dynamically generate a HTML code
and display as a page or we can use to show a static page saved in a Isolated
Storage or to save the page to an isolated storage. Let us jump start to see the
step by step process on how to make use of the Windows Phone 7 Web Browser
control.
Steps
Open Visual Studio 2010 and create a new
Silverlight for Windows Phone 7 application with a valid project name as shown
in the screen below.
Now we can see the Windows Phone 7 designer and
XAML windows where we can start designing our application. Let us start with
directly drag and drop the Web Browser control from the Visual Studio Tool Box
and re-size it as shown in the screen below.
XAML Code
<!--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="F5DEBUG
WP7 TUTORIALS"
Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock
x:Name="PageTitle"
Text="Web
Browser"
Margin="9,-7,0,0"
Style="{StaticResource
PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid
x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<phone:WebBrowser
HorizontalAlignment="Left"
Margin="9,121,0,0"
Name="webBrowser1"
VerticalAlignment="Top"
Height="475"
Width="441"
/>
<TextBox
Height="72"
HorizontalAlignment="Left"
Margin="-4,22,0,0"
Name="textBox1"
Text="TextBox"
VerticalAlignment="Top"
Width="380"
/>
<Button
Content="Go"
Height="72"
HorizontalAlignment="Left"
Margin="371,22,0,0"
Name="button1"
VerticalAlignment="Top"
Width="85"
/>
</Grid>
Now let us add our code behind to access a web
site by providing the URL. We need to use the Source property of the Web Browser
Control to assign the URI to navigate on clicking of the button also we have an
alternative approach of using the Navigate(URI) property to do the same task as
shown in the screen below.
Code Behind
private
void button1_Click(object
sender, RoutedEventArgs e)
{
string strURI =
textBox1.Text.ToString();
webBrowser1.Source = new Uri(strURI,
UriKind.Absolute);
//webBrowser1.Navigate(new Uri(strURI, UriKind.Absolute));
}
Now let us run the application to check the
output in the Windows Phone 7 Emulator, just press F5 to build and execute the
project and we can see the result as shown in the screen below.
Now let us see how we can create a dynamic html
and map it to the web browser control to load the html content as a static page.
First let us add a new page and add the webbrowser control to that as we did in
our above steps. Once we added the control to load the html we can see the
screen looks like below.
XAML Code
<StackPanel
x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock
x:Name="ApplicationTitle"
Text="F5DEBUG
WP7 TUTORIALS"
Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock
x:Name="PageTitle"
Text="Web
Browser"
Margin="9,-7,0,0"
Style="{StaticResource
PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid
x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<phone:WebBrowser
HorizontalAlignment="Left"
Margin="9,6,0,0"
Name="webBrowser1"
VerticalAlignment="Top"
Width="441"
Height="595"
/>
</Grid>
Now let us add the code to load the HTML
content using the WebBrowser_onloaded event as shown in the below code. The code
will take the static html content and load it to the web browser control. Add
the below code to the code behind of the page to load any static HTML page as
per the requirement.
Code Behind
public
WebBrowserPage2()
{
InitializeComponent();
webBrowser1.Loaded += WebBrowser_OnLoaded;
}
private
void WebBrowser_OnLoaded(object
sender, RoutedEventArgs e)
{
webBrowser1.NavigateToString("<html><head><meta
name='viewport' content='width=480, user-scalable=yes'
/></head><body><h2>Welcome to F5debug!
</h2><p>To get more updates visit www.f5Debug.net</p></body></html>");
}
Now let us run the application and we can see
the WebBrowser control load the static html content. To build and execute the
application press F5 and we can see the output in the Windows Phone 7 Emulator
as shown in the screen below.
Conclusion
So in this article we have seen how to use the
Web Browser control works with Windows Phone 7 application development.