Windows Phone 7 开发 31 日谈——第18日：WebBrowser控件

本文是“Windows Phone 7 开发 31 日谈”系列的第18日。

在过去的两天中，我们讨论了不同的显示控件：全景视图和枢轴控件。今天，我们来关注另一个十分重要的控件，WebBrowser。

WebBrowser是干什么用的？

    通常，WebBrowser控件可以让你的用户浏览一个特定的网页。但它不是一个完整的浏览器，因为它没有地址栏，收藏夹 ，选项卡等等。你可以把它当做HTML中的“iframe”，但它提供了更丰富的界面。你可以通过两个手指收缩（和双击）来进行缩放，平移和滚动是自动内置的，你无须自己实现。

    这个控件另一个很棒的特性是它可以加载本地和网络中的内容。这意味着如果我有很多HTML文件（也许是文档），那么我不需要为我的应用程序去重新创建这些内容。相反，我可以将这些HTML页面嵌入到我的应用程序中，并在本地（电话中）加载他们而不是依靠一个可能会出现问题的数据连接。

在WebBrowser控件中加载本地HTML内容

既然我提到了，我就应该向你展示如何来实现，对吧？首先，你需要向项目中添加一些本地HTML文件。我添加了2个作为示意，如果你需要的话可以添加成百上千个。

之后，我添加了两个按钮用来加载每个文件。有很多方法可以实现，但我确信如果你看完本文后就会对载入本地HTML文件十分自信了，并且我把寻找如何更好地利用我的示例的任务留给你。在我的代码中，有两个你会用到的引用（“using语句”）它们是：

using System.IO;
using Microsoft.Xna.Framework;

你可能会想，“XNA?真的吗?”我会在第30日的时候讲，我会向你展示XNA名称空间的强大功能。现在，请相信我！在按钮的事件处理程序中，我写了两行代码。第一行将HTML内容载入到一个StreamReader中，第二行通过使用WebBrowser的NavigateToString()方法将这些内容加载到WebBrowser中。如下所示：

StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));
Browser.NavigateToString(reader.ReadToEnd());

如果你想深入研究System.Xna.Framework或者TitleContainer，请点击相应的链接。使用上面的这个简单的例子，可以让你直接将本地HTML内容加载到WebBrowser控件中。

脚本功能是默认关闭的

如果你想加载包含JavaScript的HTML页面，你应该知道WebBrowser中的脚本功能是默认关闭的。使用WebBrowser的IsScriptEnabled属性可以将它打开（或切换）。来看例子：

XAML

<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />

C#

Browser.IsScriptEnabled = true;

程序与脚本间的对话

如果你想利用HTML内容中的脚本功能，非常容易就可以做到。如果想从你的程序中向此页中传递数据，可以使用InvokeScript()方法，传入脚本代码的方法名和一些此方法所需的参数：

string returnValue = (string)Browser.InvokeScript("getText", "http://jeffblankenburg.com", "rocks", "awesomely");

相反的，当脚本想与你的程序对话时你需要额外添加一个事件处理程序。为此，我使用了WebBrowser的ScriptNotify事件，用来获取它传给我的字符串（在我的例子中，是一个要跳转的URL）。NotifyEventArgs.Value属性包含了脚本代码传给我的值：

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
     Browser.Navigate(new Uri(e.Value, UriKind.Absolute));
}

设置好后，一行简单的Javascript代码就可以触发这个事件：

window.external.Notify("http://jeffblankenburg.com");

因为大多数情况下你会加载网络上的内容，所以你需要让用户知道正在发生的事儿。看起来现在是个讨论进度条的好时机，来让我们看一下如何使用它才能让用户在我们加载内容的时候耐下性子来。

在WebBrowser控件中使用进度条

MSDN中有大量的关于进度条的信息，所以我就不再讲了。我要做的是向你展示如何为用户创建一个简单的“等待”动画，从而让他们知道你正在加载内容。在下面的例子中使用进度条时，我需要将IsIndeterminate属性设为true，并在适当的时候显示或隐藏。下面是XAML代码和C#代码：

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#

void Browser_Navigating(object sender, NavigatingEventArgs e)
{
    ProgBar.Visibility = Visibility.Visible;
}

void Browser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
    ProgBar.Visibility = Visibility.Collapsed;
}

你会看到我使用了Navigated和Navigating事件的处理程序来在合适的时候向用户显示进度条。马上来看看下面的代码吧！

下载示例代码

今天我们深入全面地讨论了WebBrowser控件，但正如我的例子一样，只有深入剖析这些代码，看看它们是如何工作的，才能深入体会到你在做什么。赶紧行动吧！下载这个示例，想想如何将它添加到你的项目中去。

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

 

如果大家喜欢我的文章，请点击“推荐”，谢谢！