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 = "";

　　html += e.Review.Summary;

　　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的更多信息请参考这篇文章。
 

本文转自 wws5201985 51CTO博客，原文链接：http://blog.51cto.com/wws5201985/800161，如需转载请自行联系原作者