您可以在创建 WinFormium 窗体时设置窗体的样式,其中有很多窗体样式移除了系统标题栏和命令按钮,例如:无边框窗体样式、移除了标题栏的系统窗体样式、透明窗体样式等。创建了这类样式的窗体将导致您无法拖动窗体,也无法通过系统命令按钮来最小化、最大化和关闭窗体。如果您需要在这类窗体中实现这些功能,您可以使用 Formium
类提供的方法来实现,WinFormium 还在网页前端提供了一些 JavaScript API 以及 css 样式来实现这些功能。
当您创建了一个无边框窗体或者移除了标题栏的系统窗体时,您需要为前端页面某个作为拖动区域的元素添加加上 css 属性 app-region: drag
,例如:
<html>
<head>
<title>Drag to Move</title>
</head>
<body>
<div>
<h1 style="app-region: drag">
Drag to Move<span style="app-region: no-drag">Exclude This Area</span>
</h1>
</div>
</body>
</html>
上面的例子中,为 h1
的 css 属性加上了 app-region: drag
属性,这时运行程序后,您可以拖动 h1
元素来移动窗体。当然,如果您想从可拖动区域排除一些区域让其不可拖动,您可以为该元素添加 app-region: no-drag
属性,例如上面例子中的 span
元素。
灵活运用 app-region
属性的 drag | no-drag
属性值是非常有用的,您可以通过这个属性来实现窗体的拖动,也可以通过这个属性来排除一些区域,让这些区域不可拖动。例如,在使用 html 模拟一个系统标题栏时,您可以为标题栏的整个区域添加 app-region: drag
属性,这样就可以拖动标题栏来移动窗体,而标题栏的右侧的命令按钮区域则可以添加 app-region: no-drag
属性,将此区域排除到可拖动区域外,这样可以避免命令按钮不响应网页端鼠标单击事件的问题。
当您创建了一个无边框窗体或者移除了标题栏的系统窗体时,您需要为前端页面某个作为窗体系统命令的元素添加加上 html 属性 formium-command: [command]
来实现模拟命令按钮的目的,例如:
<html>
<head>
<title>Drag to Move</title>
</head>
<body>
<div>
<h1 style="app-region: drag">
Drag to Move<span style="app-region: no-drag" formium-command="close"
>Click to Close</span
>
</h1>
</div>
</body>
</html>
在上面的代码中,span
元素的 formium-command
属性值为 close
,这时运行程序后,您可以点击 span
元素来关闭窗体。formium-command
属性的值可以是以下几种:
值 | 描述 |
---|---|
close | 关闭窗体 |
minimize | 最小化窗体 |
maximize | 最大化窗体 |
restore | 还原窗体 |
fullscreen | 全屏化窗体 |
除了使用内置命令外,您还可以使用 JavaScript API 来实现窗体系统命令的功能。WinFormium 在前端环境提供了一个 formium.hostWindow
类,该类提供了一系列的方法来实现窗体系统命令的功能,例如:
formium.hostWindow.close();
您可以使用任何一种 JavaScript 调用方式来调用这些方法,例如:
<html>
<head>
<title>Drag to Move</title>
</head>
<body>
<div>
<h1 style="app-region: drag">
Drag to Move<span style="app-region: no-drag" onclick="clicked()"
>Click to Close</span
>
</h1>
</div>
<script>
function clicked() {
const hostWindow = window.formium?.hostWindow;
if (hostWindow) {
hostWindow.close();
} else {
alert("This is not running in WinFormium");
}
}
</script>
</body>
</html>
需要注意的是,formium.hostWindow
类只在 WinFormium 环境中存在,如果您的网页不是在 WinFormium 环境中运行,那么 formium.hostWindow
类将不存在,因此您需要在调用这些方法之前先判断 formium.hostWindow
类是否存在。
如果您想了解更多关于 formium.hostWindow
类的信息,请参阅《窗体 JavaScript 指南》。