WP7 development (12) webbrowser Control

WebbrowserWhat is it?

Generally, the webbrowser control allows your users to browse a specific webpage. But it is not a complete browser, because it does not have the address bar, favorites, tabs, and so on. You can regard it as "iframe" in HTML, but it provides a richer interface. You can scale by two fingers (and double-click), and the translation and scroll are automatically built in, you do not need to implement it yourself.

Another great feature of this control is that it can load local and network content. This means that if I have a lot of HTML files (maybe documents), then I do not needProgramRe-create the content. Instead, I can embed these HTML pages into my applications and load them locally (on the phone), rather than relying on a data connection that may cause problems.

Load local HTML content in the webbrowser Control

First, you need to add some local HTML files to the project. I added two as a signal. If you need to, you can add hundreds or even thousands.

Then, I added two buttons to load each file. There are many ways to achieve this, but I am sure that after reading this article, you will be very confident in loading local HTML files, and I will leave you with the task of finding a better place to use my example. In myCodeThere are two references you will use ("using statement"). They are:

Using System. IO;
Using Microsoft. xNa. Framework;

You may think, "xNa? Really ?" I will talk about the powerful functions of xNa namespace on the 15th day. Believe me now! In the event handler of the button, I wrote two lines of code. The first line loads HTML content to a streamreader, and the second line loads the content to webbrowser by using the navigatetostring () method of webbrowser. As follows:

Streamreader =   New Streamreader (titlecontainer. openstream ( " Html/wp7wiki.html " ));
Browser. navigatetostring (reader. readtoend ());

If you want to study system. xNa. framework or titlecontainer in depth, click the corresponding link. Using the simple example above, you can directly load the local HTML content to the webbrowser control.

The script function is disabled by default.

If you want to load HTML pages containing JavaScript, you should know that the Script Function in webbrowser is disabled by default. You can use the isscriptenabled attribute of webbrowser to open or switch it ). Here is an example:

XAML

< Phone: webbrowser X: Name = "Browser" Isscriptenabled = "True"   />

C #

Browser. isscriptenabled =   True ;

Dialogue between programs and scripts

If you want to use the Script Function in HTML content, it is very easy to do. If you want to pass data to this page from your program, you can use the invokescript () method to pass in the Method Name of the script code and some parameters required for this method:

String Returnvalue = ( String ) Browser. invokescript ( " Gettext " , " Http://jeffblankenburg.com " , " Rocks " , " Awesomely " );

On the contrary, when the script wants to talk to your program, you need to add an additional event handler. To this end, I used the scriptnotify event of webbrowser to obtain the string it sent to me (in my example, it is a URL to jump ). The policyeventargs. Value Attribute contains the values passed to me by the script code:

Void Browser_scriptpolicy ( Object Sender, policyeventargs E)
{
Browser. navigate ( New Uri (E. Value, urikind. Absolute ));
}

After setting, a simple JavaScript code line can trigger this event:

Window. External. Y ( " Http://jeffblankenburg.com " );

In most cases, you load content on the network, so you need to let users know what is happening. It seems to be a good time to discuss the progress bar. Let's take a look at how to use it so that users can resist downsides when loading content.

Use the progress bar in the webbrowser Control

Msdn has a lot of information about the progress bar, so I will not talk about it anymore. What I want to do is show you how to create a simple "wait" animation for users to let them know that you are loading the content. When using the progress bar in the following example, I need to set the isindeterminate attribute to true and display or hide it when appropriate. The following are the XAML code and C # code:

XAML

< Progressbar Foreground = "Orange" X: Name = "Progbar" Visibility = "Collapsed" Isindeterminate = "True" Height = "4" Horizontalalignment = "Left" Margin = "10, 66, 0, 0" Verticalalignment = "TOP" Width = "460"   />

C #

Code

Void Browser_navigating ( Object Sender, navigatingeventargs E)
{
Progbar. Visibility = visibility. visible;
}< P>

void browser_navigated ( Object sender, system. windows. navigation. navigationeventargs e)
{< br> progbar. visibility = Visi Bility. collapsed;
}

you can see that I use the navigated and navigating event handler to display the progress bar to users when appropriate.

download the sample code

today we have discussed the webbrowser control in depth, but just as in my example, we only need to thoroughly analyze the code, only by looking at how they work can you gain a deep understanding of what you are doing. Hurry up! Download this example and think about how to add it to your project.

address: http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-18-WebBrowser-Control.aspx