Windows Phone WebBrowser的技巧


無論是在桌面級開發中,還是在手機端開發中,WebBrowser都是一個經常會用到的控件;Windows Phone中的WebBrowser雖然遠遠沒有桌面版那么強大,但依然足夠應付常規用途。本文就來介紹幾則Windows Phone中的WebBrowser控件的小技巧。 

1.顯示HTML片段

WebBrowser的NavigateToString方法可以用來將一段HTML片段顯示在WebBrowser中。利用這個方法可以把WebBrowser當作一個增強版的RichTextBox來使用,京東商城的Windows Phone客戶端在展示商品信息時就使用了這種技術。而且這種技術還有助於解決Windows Phone中TextBlock顯示長文本的一個bug,具體表現為當文本過長時,TextBlock只顯示文本的前半段內容,后半段內容不予顯示,但卻留出了位置(滾動條還能到達,非常詭異),而WebBrowser在顯示長文本時就沒有這種困擾。

但NavigateToString並不是完美的,假若傳入的字符串中包含中文(或其他UTF-8字符)的話,就會顯示為亂碼。

解決這個問題的方法之一是提前對字符串進行轉碼,可以參考這篇文章。但這樣做的代價是需要遍歷所有字符,其實只要把需要顯示的HTML片段簡單構造成HTML文件,存儲到獨立存儲中,然后再用WebBrowser以常規的方式打開即可解決這個問題。如下面的代碼所示:

using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())
{
if (!file.DirectoryExists("temp"))
file.CreateDirectory("temp");
using (IsolatedStorageFileStream fs = new IsolatedStorageFileStream("temp\\review.html", FileMode.Create, file))
{
string html = "<!DOCTYPE html><html lang='zh-CN'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>";
html += e.Review.Summary;
html += "</body></html>";
byte[] bytes = Encoding.UTF8.GetBytes(html);
fs.Write(bytes, 0, bytes.Length);
}
}
this.wb.Navigate(new Uri("temp\\review.html", UriKind.Relative));

2.禁止縮放

WebBrowser支持縮放,但有時我們並不需要縮放功能,譬如在用它來解決TextBlock的長文本bug時。

如果需要禁用一切手勢,可以將WebBrowser的IsHitTestVisible設置為False,但這樣做的后果是WebBrowser滑動顯示內容的功能都會失去。但如果僅僅想要禁用縮放功能,可以在WebBrowser將要顯示的HTML的Head中加入這樣下面的代碼:

<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' />

關於viewport的更多細節可以參考MSDN Blog的這篇文章。值得注意的是原文在發表時,Windows Phone中的IE還不支持initial-scale、minimum-scale和maximum-scale,而在最新的Windows Phone Mango更新中,除了initial-scale之外的其余屬性都已經可以很好的支持了。

3.接管橫向滑動

如果用WebBrowser來解決TextBlock的bug,那么還有一個問題需要注意,WebBrowser會接管橫向滑動手勢,用來移動頁面位置,也就是說,假如你把WebBrowser方知道Pivot或Panorama控件中時,就沒有辦法切換到其他Item了(除非從Header部分橫向滑動)。

不過一般在用WebBrowser代替TextBlock時,並需要它內置的橫向滑動功能(通常會禁用縮放),所以我們可以想辦法偵測發生在WebBrowser上的橫向滑動手勢,並用來修改Pivot或Panorama的SelectedIndex。所幸的是,Silverlight Toolkit For Windows Phone中有一個組件可以幫我們輕松的完成這項工作。

首先在Xaml中添加GestureService.GestureListener:

<phone:WebBrowser Name="wb" Loaded="wb_Loaded" LoadCompleted="wb_LoadCompleted">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick" />
</toolkit:GestureService.GestureListener>
</phone:WebBrowser>

在GestureService.GestureListener的Flick事件中修改Pivot或Panorama的SelectedIndex:

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Direction.ToString() == "Horizontal")
{
this.p.SelectedIndex = 1;
}
}

除了Flick之外,GestureService還支持Tap、Double Tap、Touch and Hold、Pan、以及Pinch and Stretch多種手勢。關於GestureService的更多信息請參考這篇文章







免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM