可拖动的HTML窗口
本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"可拖动HTML窗口"。
纯HTML窗口因为没有窗口边框和标题，所以默认无法拖动。
现在我们介绍一个不用编码就能实现拖动纯HTML窗口的方法，过程很简单：
1、开启WebViewer的非客户区支持：
wv.CoreWebView2.Settings.IsNonClientRegionSupportEnabled =
True
'开启非客户区支持
2、窗口的标题栏元素样式加上：
-webkit-app-region: drag;
窗口标题栏的按钮，例如关闭按钮加上样式：
-webkit-app-region: no-drag;
写一行代码，设置两个样式，即可实现窗口拖动的功能。
示例
AfterLoad事件代码：
'''Async
e.Form.BaseForm.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None
'去掉窗口边框
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
wv.CoreWebView2.AddHostObjectToScript("frm",
e.Form)
'注入当前窗口
wv.CoreWebView2.Settings.IsNonClientRegionSupportEnabled =
True
'开启非客户区的支持
'测试页面
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯HTML窗口拖动演示</title>
<style>
body { margin:0; font-family:'Segoe UI', Arial, sans-serif;
overflow:hidden; }
#title-bar {
height:40px; background:#f0f0f0; color:#1a1a1a;
display:flex; align-items:center; justify-content:space-between;
padding:0 12px; border-bottom:1px solid #e0e0e0;
-webkit-app-region: drag; cursor:move;
}
#close-btn {
width:28px; height:28px; border:none; border-radius:4px;
background:transparent; color:#1a1a1a; font-size:16px;
cursor:pointer; -webkit-app-region: no-drag;
}
#close-btn:hover { background:rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div id="title-bar">
可拖动的窗口标题栏
<button id="close-btn" onclick="closeForm()">×</button>
</div>
<script>
const frm = window.chrome.webview.hostObjects.sync.frm;
function closeForm() { frm.CloseAsync(); }
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
'打开测试页面
提示：
我们也用纯js代码实现了一个可以拖动的HTML窗口，可以参考窗口“可拖动HTML窗口js版本”，普通用户没必要研究的。