Windows Phone 7 開發 31 日談——第18日：WebBrowser控制項

本文是 “Windows Phone 7 開發 31 日談”系列的第18日。

在過去的兩天中，我們討論了不同的顯示控制項：全景視圖和樞軸控制項。今天，我們來關注另一個十分重要的控制項，WebBrowser。

WebBrowser是幹什麼用的？

    通常，WebBrowser控制項可以讓你的使用者瀏覽一個特定的網頁。但它不是一個完整的瀏覽器，因為它沒有地址欄，收藏夾 ，選項卡等等。你可以把它當做HTML中的“iframe”，但它提供了更豐富的介面。你可以通過兩個手指收縮（和雙擊）來進行縮放，平移和滾動是自動內建的，你無須自己實現。

    這個控制項另一個很棒的特性是它可以載入本地和網路中的內容。這意味著如果我有很多HTML檔案（也許是文檔），那麼我不需要為我的應用程式去重新建立這些內容。相反，我可以將這些HTML頁面嵌入到我的應用程式中，並在本地（電話中）載入他們而不是依靠一個可能會出現問題的資料連線。

在WebBrowser控制項中載入本地HTML內容

既然我提到了，我就應該向你展示如何來實現，對吧？首先，你需要向項目中添加一些本地HTML檔案。我添加了2個作為示意，如果你需要的話可以添加成百上千個。

之後，我添加了兩個按鈕用來載入每個檔案。有很多方法可以實現，但我確信如果你看完本文後就會對載入本地HTML檔案十分自信了，並且我把尋找如何更好地利用我的樣本的任務留給你。在My Code中，有兩個你會用到的引用（“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

 

如果大家喜歡我的文章，請點擊“推薦”，謝謝！