NanUI

无标题栏窗体

概述

您可以在创建 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

除了使用内置命令外,您还可以使用 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 指南》

另请参阅