UWP开发入门(二十三)——WebView
本篇讨论在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的更多相关文章
- UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏
因为.NET的垃圾回收机制相当完善,通常情况下我们是不需要关心内存泄漏的.问题人一但傻起来,连自己都会害怕,几个页面跳啊跳的,内存蹭蹭的往上涨,拉都拉不住.这种时候我们就需要冷静下来,泡一杯热巧克力. ...
- UWP开发入门(十六)——常见的内存泄漏的原因
本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏>中提到过,即使有 ...
- UWP开发入门(十)——通过继承来扩展ListView
本篇之所以起这样一个名字,是因为重点并非如何自定义控件,不涉及创建CustomControl和UserControl使用的Template和XAML概念.而是通过继承的方法来扩展一个现有的类,在继承的 ...
- UWP开发入门系列笔记之(一):UWP初览
标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...
- UWP开发入门(四)——自定义CommandBar
各位好,再次回到UWP开发入门系列,刚回归可能有些不适应,所以今天我们讲个简单的,自定义CommandBar,说通俗点就是自定义类似AppBarButton的东西,然后扔到CommandBar中使用. ...
- UWP开发入门(25)——通过Radio控制Bluetooth, WiFi
回顾写了许久的UWP开发入门,竟然没有讲过通过Windows.Devices.Radios.Radio来控制Bluetooth和WiFi等功能的开关.也许是因为相关的API设计的简单好用,以至于被我给 ...
- UWP开发入门(二十一)——保持Ui线程处于响应状态
GUI的程序有时候会因为等待一个耗时操作完成,导致界面卡死.本篇我们就UWP开发中可能遇到的情况,来讨论如何优化处理. 假设当前存在点击按钮跳转页面的操作,通过按钮打开的新页面,在初始化过程中存在一些 ...
- UWP开发入门(二)——RelativePanel
RelativePanel也是Win10 UWP新增的控件,和上篇提到的SplitView一样在UWP的UI布局起到非常重要的作用.说句实在话,这货其实就是为了UWP的Adaptive UI而特意增加 ...
- UWP开发入门(十一)——Attached Property的简单应用
UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row: <Grid Background="{ThemeResource Applica ...
随机推荐
- angular.js 例子
angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...
- Aoite 系列(02) - 超动感的 Ioc 容器
Aoite 系列(02) - 超动感的 Ioc 容器 Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Ioc 是一套解决依赖的最佳实践. 说 ...
- 与webview打交道中踩过的那些坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...
- 【译】Activitys, Threads和 内存泄露
Android编程中一个共同的困难就是协调Activity的生命周期和长时间运行的任务(task),并且要避免可能的内存泄露.思考下面Activity的代码,在它启动的时候开启一个线程并循环执行任务. ...
- 技术渣如狗,面试虐成猴——本科楼主UC笔试加处女一面全纪录
背景——楼主为广州某校小本一枚,学习成绩渣(班里排名几乎倒数),技术基础渣(算是会敲代码,但很多计算机网络.操作系统的知识都只有模糊的印象).在舍友的鼓励下,收到广州UC的面试通知后,勇敢来到公司直面 ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- 跟我一起云计算(3)——hbase
hbase HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Go ...
- git rm–r folder fatal:pathspec "" did not match any files
问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...
- Qt 设置应用程序图标
Qt4设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc; ...
- Javascript模块化编程笔记
最近在读阮一峰的博客http://www.ruanyifeng.com/blog/2012/10/javascript_module.html,随手记录一些重要笔记. Javascript模块的雏形 ...