Windows Phone 7 開發 31 日談——第18日:WebBrowser控制元件
By Jeff Blankenburg
本文是“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
相關文章
- Windows Phone 7 開發 31 日談——第20日:地圖控制元件Windows地圖控制元件
- Windows Phone 7 開發 31 日談——第17日:樞軸控制元件Windows控制元件
- Windows Phone 7 開發 31 日談——第7日:啟動器Windows
- Windows Phone 7 開發 31 日談——第25日:外部APIWindowsAPI
- Windows Phone 7 開發 31 日談——第24日:嵌入字型Windows
- Windows Phone 7 開發 31 日談——第19日:推送通知Windows
- Windows Phone 7 開發 31 日談——第3日:返回鍵Windows
- Windows Phone 7 開發 31 日談——第16日:全景檢視Windows
- Windows Phone 7 開發 31 日談——第13日:位置服務Windows
- Windows Phone 7 開發 31 日談——第8日:選擇器Windows
- Windows Phone 7 開發 31 日談——第4日:裝置方向Windows
- Windows Phone 7 開發 31 日談——第1日:專案模板Windows
- Windows Phone 7 開發 31 日談——第21日:Silverlight Toolkit for Windows PhoneWindows
- Windows Phone 7 開發 31 日談——第15日:獨立儲存Windows
- Windows Phone 7 開發 31 日談——第11日:加速感應器Windows
- Windows Phone 7 開發 31 日談——第5日:系統主題Windows
- Windows Phone 7 開發 31 日談——第2日:頁面導航Windows
- Windows Phone 7 開發 31 日談——第22日:應用?還是 遊戲?Windows遊戲
- Windows Phone 7 開發 31 日談——第14日:墓碑機制(多工)Windows
- Windows Phone 7 開發 31 日談——第12日:使手機震動Windows
- Windows Phone 7 開發 31 日談——第23日:提供試用版應用程式Windows
- Windows Phone 7 開發 31 日談——第26日:與其他開發人員(免費)分享你的程式Windows
- Windows Phone 7 如何禁用WebBrowser 控制元件縮放和左右移動WindowsWeb控制元件
- Windows Phone 中WebBrowser開啟新視窗WindowsWeb
- ·Windows Phone 7首款機型8月25日開賣Windows
- 7月18日—7月24日共有31款遊戲開測|GameRes遊戲GAM
- 一起學Windows Phone7開發(十四.一 Phone Task)Windows
- Windows Phone7開發系列視訊地址Windows
- 開發日誌7
- 5.9安卓開發日記31安卓
- Windows phone應用開發[18]-下拉重新整理Windows
- 安卓開發日記18安卓
- 7月31日,HarmonyOS開發者日將於杭州舉辦
- 12月18日—12月24日共有31款遊戲開測|GameRes遊戲GAM
- 使用XNA為Windows phone 7開發簡單拼圖遊戲Windows遊戲
- Windows Phone 8開發連結Windows
- windows phone資料庫開發Windows資料庫
- Windows Phone 8 開發筆記Windows筆記