使用OnWindowReady重载方法,您可以browserClient参数来设置Chromium客户端的各个处理器,以此来实现Chromium浏览器的各项行为,例如:如何处理新开窗口、如何处理下载请求、如何通知应用程序网页标题的改变等等行为。
这个方法通常在Chromium浏览器核心初始化完成之后执行。
如果不需要定义行为处理器,那么留空即可。
protected override void OnWindowReady(IWebBrowserHandler browserClient) { }使用OnRegisterGlobalObject重载方法,您可以向浏览器的Javascript上下文注册各种.NET对象和方法,您可以把该重载方法的参数global看作浏览器的window对象。具体的实现方法可以参考后面章节。
protected override void OnRegisterGlobalObject(JSObject global) { }通过以上操作您就完成了您的第一个NanUI窗口,该窗口将使用google.com的内容作为您窗体的界面。
但是到目前为止,应用程序还不能正常运行,因为我们还需要初始化NanUI和CEF环境。
初始化NanUI和Chromium Embedded框架环境初始化NanUI和CEF的操作我们需要放在Main方法中。
using NetDimension.NanUI; static class Program { /// <summary> /// The main entry point for the application. /// </summary> [STAThread] static void Main() { Bootstrap .Initialize() .Run(() => new MainWindow()); } }至此,您的第一个NanUI应用程序已经能够正常运行了。
进一步定制您的窗口如果您还想进一步定制您的窗口样式,请重载OnStandardFormStyle方法,并使用style参数来设置窗口启动位置、大小、图标、边框样式等信息。
protected override void OnStandardFormStyle(IStandardHostWindowStyle style) { base.OnStandardFormStyle(style); style.Width = 1280; style.Height = 720; style.Icon = System.Drawing.SystemIcons.WinLogo; style.StartPosition = FormStartPosition.CenterScreen; } 运行您的第一个NanUI应用程序如图,您的第一个NanUI应用程序成功运行了。
NanUI基础使用示例通过此示例将告诉您如何使用最少的代码来运行NanUI。
B站:[https://www.bilibili.com/video/av87654190/)
西瓜视频:[https://www.ixigua.com/i6791108584999485955)
在您的NanUI应用程序中使用无边框样式通过上一章节文档的介绍,您已经了解了创建NanUI应用以及创建Formium浏览器承载窗口的基础知识。使用与之前文档中介绍的相同套路创建完应用程序后,您只需要设置浏览器承载窗体的WindowType为Borderless模式即可创建无边框样式的窗体。
本篇章节将主要介绍无边框样式窗体的相关的知识点,内容涉及了NanUI系统中特殊的CSS、NanUI特有的html标记属性、Javascript对象和全局事件等。
设置承载窗体为无边框样式指定WindowType属性为Borderless,让窗体以无边框样式呈现。
public override HostWindowType WindowType => HostWindowType.Borderless; 设置可拖拽/不可拖拽区域当窗体以无边框样式呈现时,默认窗口失去了原生窗口的标题栏及其控制区域,因此无法通过拖拽来移动窗体。这时,您需要通过设置特殊的CSS属性-webkit-app-region来确定web页面中的哪一部分区域支持拖拽,您可以通过灵活的设计可拖拽和不可拖拽区域来创建异形拖拽区域。
设置可拖拽区域
.draggable-area { -webkit-app-region: drag; }设置不可拖拽区域
.draggable-area { -webkit-app-region: no-drag; }使用下面的示例代码,绘制一个可拖拽的矩形区域,并在该区域内排除className="controls"的矩形区域。
HTML
<div> <span>Welcome to NanUI</span> <div> <a title="Minimize"> <svg x="0px" y="0px" viewBox="0 0 10.2 1" data-radium="true"><rect fill="#ffffff"></rect></svg> </a> <a title="Maximize"> <svg x="0px" y="0px" viewBox="0 0 10.2 10.1" data-radium="true"><path fill="#ffffff" d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"></path></svg> </a> <a title="Close"> <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" data-radium="true"><polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon></svg> </a> </div> </div>SCSS
.titlebar { // scss ... -webkit-app-region: drag; > controls { // scss ... -webkit-app-region: no-drag; } } 使用NanUI的内置命令NanUI内置了html属性nanui-command,通过该属性您可以快速的实现无边框窗体的最大化、最小化、还原及关闭窗口命令。
例如设置nanui-command="close"可以实现点击该元素后关闭窗体。
<a title="Minimize" nanui-command="close"> // 关闭按钮 ... </a>