zoukankan      html  css  js  c++  java
  • Web Browser使用技巧

    无论是在桌面级开发中,还是在手机端开发中,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的更多信息请参考这篇文章

    转载于http://msdn.microsoft.com/zh-cn/library/hh968322.aspx

  • 相关阅读:
    托词坚持了170多天,昨天因为晚上打球竟然给忘了
    2013转眼间半年过去了,回顾一下。也看一下计划的实施情况以及下半年的计划
    开始新的板子PCB绘制了。
    致时代前行者:致敬每一个奔腾不息的心灵(转)
    刚才看了年初的计划,增加一部分内容
    五种男人
    哪些行业会用到乐泰胶水?
    第一个python小程序
    一个简单的IPmsg程序源码分析(一)
    关于linux下面printf函数缓冲区问题
  • 原文地址:https://www.cnblogs.com/qixue/p/3492950.html
Copyright © 2011-2022 走看看