本篇讨论在UWP开发中使用WebView控件时常见的问题,以及一些小技巧。

  WebView是实际开发中常用的控件,很多大家抱怨的套网页的应用都是通过WebView来实现的。这里要澄清一个问题,套网页的应用并不一定是差的应用,很多网页采用了响应式设计,假设网页不存在复杂的交互,提取网页的正文部分嵌入WebView,可以说方便快捷省时省力。比如亚马逊、驴妈妈这些UWP APP都还挺不错的,京东那个网页就套的比较差了……

  WebView最为简单的用法如下:

<WebView Source="http://www.cnblogs.com/manupstairs/"></WebView>

  直接将某个网页显示出来,感觉没有什么卵用……或者我们稍微高级一点,手动加载一下:

        private void Button_Click(object sender, RoutedEventArgs e)
{
this.webViewManual.Navigate(new Uri("http://www.cnblogs.com/"));
}

  

  通过Navigate方法我们能够做到传递参数,在C#代码中Navigate到某个Html页面,但是这在实际使用中很不方便,我们希望WebView能够通过Binding来动态的呈现内容,这需要实现一个简单的附加属性:

    public class WebViewEx
{
public static string GetUri(DependencyObject obj)
{
return (string)obj.GetValue(UriProperty);
} public static void SetUri(DependencyObject obj, string value)
{
obj.SetValue(UriProperty, value);
} // Using a DependencyProperty as the backing store for WebViewUri. This enables animation, styling, binding, etc...
public static readonly DependencyProperty UriProperty =
DependencyProperty.RegisterAttached("Uri", typeof(string), typeof(WebViewEx), new PropertyMetadata(null, PropertyChangedCallback)); private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var webView = d as WebView;
webView.NavigateToString(e.NewValue.ToString());
}
}

  在完成上述附加属性的定义后,就可以在XAML中使用binding了,这里binding的HtmlContent属性返回Html格式的字符串。

<WebView Grid.Column="2" local:WebViewEx.Uri="{x:Bind HtmlContent}"></WebView>

  这种绑定部分Html格式字符串的方式通常都工作地比较好。但是如果Html的字符串中存在CSS的class引用,即使你提供的字符串中包含了CSS的样式定义,NavigateToString方法也是无法识别的。举例如下代码:

            string adaptive = "<style> .M_cur_zoom_out { height: auto; width: 100 %; } </style>";
string html = "<p> <img id =\"pic\" class=\"M_cur_zoom_out\" src=\"http://ww4.sinaimg.cn/large/41467e42jw1f8himcfgnoj20gj1ax793.jpg\" /> </p> <p> 微信订阅号 zhangzishi_weixin 合作请直接联系 tintin@zhangzishi.cc</p>";
adaptive += html; webViewTest.NavigateToString(adaptive);

  样式M_cur_zoom_out无法被WebView正确解析的。但是直接设置image标签的属性则没有问题,MSDN上的描述是:“NavigateToString 支持带有对外部文件(如 CSS、脚本、图像和字体)的引用的内容。但是,它不提供以编程方式生成或提供这些资源程序的方式。”

  变通的方式也很简单,在解析的时候,给img标签内部加上width=100%即可。

        private static void UriPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var webView = d as WebView;
var adaptive = e.NewValue.ToString().Replace("<img", "<img width=100%");
webView.NavigateToString(adaptive);
}

  

  效果对比如上图,这个小技巧在嵌入图片时很有用。本篇经过几次修改,内容反而越发的减少了,实在是有些汗颜,希望能给初学者一些帮助。

  GitHub:

  https://github.com/manupstairs/UWPSamples/tree/master/UWPSamples/UseWebView

UWP开发入门(二十三)——WebView的更多相关文章

  1. UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏

    因为.NET的垃圾回收机制相当完善,通常情况下我们是不需要关心内存泄漏的.问题人一但傻起来,连自己都会害怕,几个页面跳啊跳的,内存蹭蹭的往上涨,拉都拉不住.这种时候我们就需要冷静下来,泡一杯热巧克力. ...

  2. UWP开发入门(十六)——常见的内存泄漏的原因

    本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏>中提到过,即使有 ...

  3. UWP开发入门(十)——通过继承来扩展ListView

    本篇之所以起这样一个名字,是因为重点并非如何自定义控件,不涉及创建CustomControl和UserControl使用的Template和XAML概念.而是通过继承的方法来扩展一个现有的类,在继承的 ...

  4. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

  5. UWP开发入门(四)——自定义CommandBar

    各位好,再次回到UWP开发入门系列,刚回归可能有些不适应,所以今天我们讲个简单的,自定义CommandBar,说通俗点就是自定义类似AppBarButton的东西,然后扔到CommandBar中使用. ...

  6. UWP开发入门(25)——通过Radio控制Bluetooth, WiFi

    回顾写了许久的UWP开发入门,竟然没有讲过通过Windows.Devices.Radios.Radio来控制Bluetooth和WiFi等功能的开关.也许是因为相关的API设计的简单好用,以至于被我给 ...

  7. UWP开发入门(二十一)——保持Ui线程处于响应状态

    GUI的程序有时候会因为等待一个耗时操作完成,导致界面卡死.本篇我们就UWP开发中可能遇到的情况,来讨论如何优化处理. 假设当前存在点击按钮跳转页面的操作,通过按钮打开的新页面,在初始化过程中存在一些 ...

  8. UWP开发入门(二)——RelativePanel

    RelativePanel也是Win10 UWP新增的控件,和上篇提到的SplitView一样在UWP的UI布局起到非常重要的作用.说句实在话,这货其实就是为了UWP的Adaptive UI而特意增加 ...

  9. UWP开发入门(十一)——Attached Property的简单应用

    UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row: <Grid Background="{ThemeResource Applica ...

随机推荐

  1. angular.js 例子

    angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...

  2. Aoite 系列(02) - 超动感的 Ioc 容器

    Aoite 系列(02) - 超动感的 Ioc 容器 Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Ioc 是一套解决依赖的最佳实践. 说 ...

  3. 与webview打交道中踩过的那些坑

    随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...

  4. 【译】Activitys, Threads和 内存泄露

    Android编程中一个共同的困难就是协调Activity的生命周期和长时间运行的任务(task),并且要避免可能的内存泄露.思考下面Activity的代码,在它启动的时候开启一个线程并循环执行任务. ...

  5. 技术渣如狗,面试虐成猴——本科楼主UC笔试加处女一面全纪录

    背景——楼主为广州某校小本一枚,学习成绩渣(班里排名几乎倒数),技术基础渣(算是会敲代码,但很多计算机网络.操作系统的知识都只有模糊的印象).在舍友的鼓励下,收到广州UC的面试通知后,勇敢来到公司直面 ...

  6. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  7. 跟我一起云计算(3)——hbase

    hbase HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Go ...

  8. git rm–r folder fatal:pathspec "" did not match any files

    问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...

  9. Qt 设置应用程序图标

    Qt4设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc; ...

  10. Javascript模块化编程笔记

    最近在读阮一峰的博客http://www.ruanyifeng.com/blog/2012/10/javascript_module.html,随手记录一些重要笔记.  Javascript模块的雏形 ...