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