31天學(xué)會Windows Phone 7開發(fā)：WebBrowser控件
本文是《Windows Phone 7開發(fā)31日談》系列的第十八篇文章。在過去的兩篇文章中，我們討論了不同的顯示控件：全景視圖和樞軸控件。本文，我們來關(guān)注另一個十分重要的控件，WebBrowser。
WebBrowser是干什么用的？
通常，WebBrowser控件可以讓你的用戶瀏覽一個特定的網(wǎng)頁。但它不是一個完整的瀏覽器，因?yàn)樗鼪]有地址欄，收藏夾 ，選項(xiàng)卡等等。你可以把它當(dāng)做HTML中的“iframe”，但它提供了更豐富的界面。你可以通過兩個手指收縮（和雙擊）來進(jìn)行縮放，平移和滾動是自動內(nèi)置的，你無須自己實(shí)現(xiàn)。
這個控件另一個很棒的特性是它可以加載本地和網(wǎng)絡(luò)中的內(nèi)容。這意味著如果我有很多HTML文件（也許是文檔），那么我不需要為我的應(yīng)用程序去重新創(chuàng)建這些內(nèi)容。相反，我可以將這些HTML頁面嵌入到我的應(yīng)用程序中，并在本地（電話中）加載他們而不是依靠一個可能會出現(xiàn)問題的數(shù)據(jù)連接。
在WebBrowser控件中加載本地HTML內(nèi)容
既然我提到了，我就應(yīng)該向你展示如何來實(shí)現(xiàn)，對吧？首先，你需要向項(xiàng)目中添加一些本地HTML文件。我添加了2個作為示意，如果你需要的話可以添加成百上千個。
之后，我添加了兩個按鈕用來加載每個文件。有很多方法可以實(shí)現(xiàn)，但我確信如果你看完本文后就會對載入本地HTML文件十分自信了，并且我把尋找如何更好地利用我的示例的任務(wù)留給你。在我的代碼中，有兩個你會用到的引用（“using語句”）它們是：
- using System.IO;
- using Microsoft.Xna.Framework;
你可能會想，“XNA?真的嗎?”我會在第30日的時候講，我會向你展示XNA名稱空間的強(qiáng)大功能。現(xiàn)在，請相信我！在按鈕的事件處理程序中，我寫了兩行代碼。第一行將HTML內(nèi)容載入到一個StreamReader中，第二行通過使用WebBrowser的NavigateToString()方法將這些內(nèi)容加載到WebBrowser中。如下所示：
- StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));
- Browser.NavigateToString(reader.ReadToEnd());
如果你想深入研究System.Xna.Framework或者TitleContainer，請點(diǎn)擊相應(yīng)的鏈接。使用上面的這個簡單的例子，可以讓你直接將本地HTML內(nèi)容加載到WebBrowser控件中。
腳本功能是默認(rèn)關(guān)閉的
如果你想加載包含JavaScript的HTML頁面，你應(yīng)該知道WebBrowser中的腳本功能是默認(rèn)關(guān)閉的。使用WebBrowser的IsScriptEnabled屬性可以將它打開（或切換）。來看例子：
XAML
- <phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />
C#
- Browser.IsScriptEnabled = true;
程序與腳本間的對話
如果你想利用HTML內(nèi)容中的腳本功能，非常容易就可以做到。如果想從你的程序中向此頁中傳遞數(shù)據(jù)，可以使用InvokeScript()方法，傳入腳本代碼的方法名和一些此方法所需的參數(shù)：
- string returnValue = (string)Browser.InvokeScript("getText", "http://jeffblankenburg.com", "rocks", "awesomely");
相反的，當(dāng)腳本想與你的程序?qū)υ挄r你需要額外添加一個事件處理程序。為此，我使用了WebBrowser的ScriptNotify事件，用來獲取它傳給我的字符串（在我的例子中，是一個要跳轉(zhuǎn)的URL）。NotifyEventArgs.Value屬性包含了腳本代碼傳給我的值：
- void Browser_ScriptNotify(object sender, NotifyEventArgs e)
- {
- Browser.Navigate(new Uri(e.Value, UriKind.Absolute));
- }
設(shè)置好后，一行簡單的Javascript代碼就可以觸發(fā)這個事件：
- window.external.Notify("http://jeffblankenburg.com");
因?yàn)榇蠖鄶?shù)情況下你會加載網(wǎng)絡(luò)上的內(nèi)容，所以你需要讓用戶知道正在發(fā)生的事兒。看起來現(xiàn)在是個討論進(jìn)度條的好時機(jī)，來讓我們看一下如何使用它才能讓用戶在我們加載內(nèi)容的時候耐下性子來。
在WebBrowser控件中使用進(jìn)度條
MSDN中有大量的關(guān)于進(jìn)度條的信息，所以我就不再講了。我要做的是向你展示如何為用戶創(chuàng)建一個簡單的“等待”動畫，從而讓他們知道你正在加載內(nèi)容。在下面的例子中使用進(jìn)度條時，我需要將IsIndeterminate屬性設(shè)為true，并在適當(dāng)?shù)臅r候顯示或隱藏。下面是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事件的處理程序來在合適的時候向用戶顯示進(jìn)度條。馬上來看看下面的代碼吧！
下載示例代碼
本文我們深入全面地討論了WebBrowser控件，但正如我的例子一樣，只有深入剖析這些代碼，看看它們是如何工作的，才能深入體會到你在做什么。趕緊行動吧！下載這個示例，想想如何將它添加到你的項(xiàng)目中去。
原作者：Jeff Blankenburg 譯者：金山崟霸
中文來源：http://www.cnblogs.com/porscheyin/archive/2010/12/23/1914786.html
英文來源：http://www.jeffblankenburg.com/2010/10/18/31-days-of-windows-phone-day-18-webbrowser-control/
【編輯推薦】
