Windows Phone 7 開發 31 日談——第18日:WebBrowser控制元件

l_serein發表於2012-11-05

By Jeff Blankenburg

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

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

 

WebBrowser 是幹什麼用的?

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

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

 

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

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

clip_image001

之後,我新增了兩個按鈕用來載入每個檔案。有很多方法可以實現,但我確信如果你看完本文後就會對載入本地HTML檔案十分自信了,並且我把尋找如何更好地利用我的示例的任務留給你。在我的程式碼中,有兩個你會用到的引用(“using語句”)它們是:

[c-sharp] view plaincopy
  1. using System.IO;  
  2. using Microsoft.Xna.Framework;  

你可能會想,“XNA?真的嗎?”我會在第30日的時候講,我會向你展示XNA名稱空間的強大功能。現在,請相信我!在按鈕的事件處理程式中,我寫了兩行程式碼。第一行將HTML內容載入到一個StreamReader中,第二行通過使用WebBrowser的NavigateToString()方法將這些內容載入到WebBrowser中。如下所示:

[c-sharp] view plaincopy
  1. StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));  
  2. Browser.NavigateToString(reader.ReadToEnd());  

如果你想深入研究System.Xna.Framework 或者TitleContainer ,請點選相應的連結。使用上面的這個簡單的例子,可以讓你直接將本地HTML內容載入到WebBrowser控制元件中。

指令碼功能是預設關閉的

如果你想載入包含JavaScript的HTML頁面,你應該知道WebBrowser中的指令碼功能是預設關閉的。使用WebBrowser的IsScriptEnabled屬性可以將它開啟(或切換)。來看例子:

XAML

[xhtml] view plaincopy
  1. <phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />  

C#

[c-sharp] view plaincopy
  1. Browser.IsScriptEnabled = true;  

程式與指令碼間的對話

如果你想利用HTML內容中的指令碼功能,非常容易就可以做到。如果想從你的程式中向此頁中傳遞資料,可以使用InvokeScript()方法,傳入指令碼程式碼的方法名和一些此方法所需的引數:

[c-sharp] view plaincopy
  1. string returnValue = (string)Browser.InvokeScript("getText""http://jeffblankenburg.com""rocks""awesomely");  

相反的,當指令碼想與你的程式對話時你需要額外新增一個事件處理程式。為此,我使用了WebBrowser的ScriptNotify事件,用來獲取它傳給我的字串(在我的例子中,是一個要跳轉的URL)。NotifyEventArgs.Value屬性包含了指令碼程式碼傳給我的值:

[c-sharp] view plaincopy
  1. void Browser_ScriptNotify(object sender, NotifyEventArgs e)  
  2. {  
  3.       Browser.Navigate(new Uri(e.Value, UriKind.Absolute));  
  4. }  

設定好後,一行簡單的Javascript程式碼就可以觸發這個事件:

[javascript] view plaincopy
  1. window.external.Notify("http://jeffblankenburg.com");  

因為大多數情況下你會載入網路上的內容,所以你需要讓使用者知道正在發生的事兒。看起來現在是個討論進度條的好時機,來讓我們看一下如何使用它才能讓使用者在我們載入內容的時候耐下性子來。

在WebBrowser控制元件中使用進度條

MSDN中有大量的關於進度條的資訊 ,所以我就不再講了。我要做的是向你展示如何為使用者建立一個簡單的“等待”動畫,從而讓他們知道你正在載入內容。在下面的例子中使用進度條時,我需要將IsIndeterminate屬性設為true,並在適當的時候顯示或隱藏。下面是XAML程式碼和C#程式碼:

XAML

[xhtml] view plaincopy
  1. <ProgressBar Foreground="Orange" x:Name="ProgBar" Visibility="Collapsed" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,66,0,0" VerticalAlignment="Top" Width="460" />  

C#

[c-sharp] view plaincopy
  1. void Browser_Navigating(object sender, NavigatingEventArgs e)  
  2. {  
  3.     ProgBar.Visibility = Visibility.Visible;  
  4. }  
  5. void Browser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)  
  6. {  
  7.     ProgBar.Visibility = Visibility.Collapsed;  
  8. }  

你會看到我使用了Navigated和Navigating事件的處理程式來在合適的時候向使用者顯示進度條。馬上來看看下面的程式碼吧!

下載示例程式碼

今天我們深入全面地討論了WebBrowser控制元件,但正如我的例子一樣,只有深入剖析這些程式碼,看看它們是如何工作的,才能深入體會到你在做什麼。趕緊行動吧!下載這個示例,想想如何將它新增到你的專案中去。

clip_image002

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

相關文章