Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Utilize Web Browser Control in Windows Phone 7

This article will explain the process to make use of the Web Browser control in the developments of Windows phone 7.

Introduction to Web Browser Control

With the help of this article, our focus will be on to gain the knowledge as to how to utilize Web Browser control in Windows phone 7 developments. What is the role of Web Browser control in Windows Phone 7? The primary responsibility of Web Browser control in windows phone 7 is deployed so as to access the static content or a web based content depending on the requirements of the development.

Web Browser control is something that is actually new in Windows Phone 7. For the reason that there is only one platform in the form of internet explorer in the Windows Phones, it is a good thing that the browser functionalities can be used in the applications of our device. This is the best choice in order to enhance the usability.

There can be plenty of ways that can be making use of in order to utilize this control in our windows phone 7 developments. The example of the same includes the generating dynamically an HTML code and then displaying it as a page. The other thing that we can do is to exhibit a static page that is actually saved in altogether an Isolated Storage or rather saving the page to an isolated storage.

We will now start with the step by step guide to see the process on how we can make use of or deploy the Windows Phone 7 Web Browser control.

Steps

The very first step would be open Visual Studio and start creating a new Silverlight for Windows Phone 7 application. This should be done with a valid project name as can be seen from the below screenshot.

Representing the Visual Studio introducing New Project

Figure 1: Representing the Visual Studio introducing New Project

We will see now the Windows Phone 7 designer and XAML windows which will help us to begin designing our application. Let us initiate our learning with directly drag and drop the Web Browser control that can be done from the Visual Studio Tool Box and re-size it. This is shown in the below screen.

Representing the Visual Studio Tool Box

Figure 2: Representing the Visual Studio Tool Box

Listing 1: 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="MRBOOL" Style="{StaticResourcePhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResourcePhoneTextTitle1Style}"/>
</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>

We will add a code behind now so as to access a web site by providing the URL. The Source property of the Web Browser Control needs to be used in order to assign the URI to redirect the user on accessing the button. Apart from this we can apply a substitute process of making use of the Navigate(URI) feature or property in order to do the same task as above with the help of the below screen.

Listing 2: 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));
}
Representing the Navigate (URI) feature or property

Figure 3: Representing the Navigate (URI) feature or property

Let us see what the output appears in the Windows Phone 7 Emulator when we run the application. At this point you just need to press F5 to build and execute the project and the result can be seen as shown in the below screen.

We will learn now to create a dynamic html and then the process to map it to the web browser control so as to load the html content as a static page. The first step would be to add a new page and then the web browser control to that much in a similar way like we did above. Post adding the controls in order to load the html, the screen will be seen as below.

Listing 3: XAML Code

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MRBOOL" Style="{StaticResourcePhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResourcePhoneTextTitle1Style}"/>
</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>
Representing the screen post adding the controls

Figure 4: Representing the screen post adding the controls

The next step is adding the code in order to load the HTML content making use of the WebBrowser_onloaded event and can be figured out from the below code. The task of the code is to take the static html content and load it to the web browser control. Now add the below code to the code that is present behind of the page. This is done in order to load any static HTML page as per the requirement.

Listing 4: 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 MrBool!
</h2>
</body></html>");
} 
Representing Class development

Figure 5: Representing Class development

We will now execute or run the application and it can be seen that the Web Browser control loads the static html content. We just need to press the button F5 and the output can be seen in the Windows Phone 7 Emulator as can be seen from the below screenshot.

Representing the Output

Figure 6: Representing the Output

Conclusion

The article here has tried to explain the process on how to utilize the Web Browser Control so as to work with the Windows Phone 7 application development.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login