WebView2 for wpf控件非常好用,然而,由于它是用的HwndHost的方式嵌入到WPF程序中的,和传统的使用HwndHost嵌入WinForm组件的方式一样,它有着WPF由来已久的空域问题(Airspace issuse),简单来说就是这样一个现象:
-
通过HwndHost的组件必须是z-index的顶层, 也就是说,不能在它的上面叠加其它组件。
-
组件不支持透明效果,不支持二三维变换等高级特性。
如果是以标准的矩形框的方式嵌入浏览器,且没有想在浏览器界面上叠加其它组件的需求,这个限制大部分的时候对我们没有啥其它的影响。 但它也限制了我们使用WPF中的高级组件的特效。
解决方案
要解决这个问题,常规的方式是离屏渲染,将浏览器页面在后端渲染到Bitmap中,再将Bitmap绘制到WPF组件中展现,同时还要处理鼠标等事件。像CEFSharp for wpf就是采用这种方式。并且最近看到的DotNetBrowser也支持这种方案。
这种方案主要的问题是性能问题,之前用CEF Sharp试过,性能基本上下降了一个数量级,在复杂场景(如在有大量标绘的地图上)对比WinForm的版本上有明显卡顿。并且矢量动画有比较明显的掉帧。不知道新版本或DotNetBrowser有没有改善。
WinUI
另外一个方案是使用WinUI,WinUI有着类似WPF的功能,但由于它采用了不同的渲染和集成机制,论坛上说WinUI没有这个问题,由于我不怎么用WinUI,没有试过。
官方方案
即使是离屏渲染这种低效的方案,目前WebView2也并不支持,官方虽然有issue在跟踪,但官方给出的时间计划也是一拖再拖,2年过去了也没有解决方案。虽然论坛上人们对官方的解决方案比较悲观,但这里记录下,下次需要用的时候再看看。
更新
2023.09.16:此问题目前有一个社区的方案,可以参看我的文章:WPF使用WebView2的空域问题的解决方案