如何使用HTML/CSS/JS來構建.Net Winform應用程序界面

本篇文章給大家分享的是有關如何使用HTML/CSS/JS來構建.Net Winform應用程序界面，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

NanUI是什么

NanUI基于ChromiumFX項目進行開發(fā)，它能讓你在你的Winform應用程序中使用HTML5/CSS3/Javascript等網頁技術來呈現用戶界面（類似Electron）。同時NanUI提供了原生窗口和定制化的無標題欄無邊框窗口，你能使用全部的網頁技術來設計和呈現你的應用程序界面。

開源方式

NanUI基于MIT協(xié)議，所以無論你使用NanUI來開發(fā)商業(yè)項目或者開源、免費項目都將不受任何限制，只需要遵照協(xié)議文件中規(guī)定的，在你的軟件中聲明使用了NanUI技術即可。

系列文檔

• NanUI簡介

• 開始使用NanUI

• 打包并使用內嵌式的HTML/CSS/JS資源

• 使用網頁來設計整個窗口

• 如何實現C#與Javascript相互掉用(待更新。。。)

• 如何處理NanUI中的下載過程 - DonwloadHandler的使用(待更新。。。)

• 如何處理NanUI中的彈窗過程 - LifeSpanHandler的使用(待更新。。。)

• 如何控制Javascript對話框 - JsDialogHandler的使用(待更新。。。)

• 自定義資源處理程序 (待更新。。。)

源碼和包

你可以通過GitHub獲取NanUI的源碼以及示例代碼，穩(wěn)定版的NanUI包通過Nuget進行分發(fā)。NanUI支持.NET4.0/4.5/4.6/4.7和更新版本的Windows窗體應用。

獲取源碼

git clone https://github.com/NetDimension/NanUI.git

Nuget包管理器

常規(guī)版本（CEF 3.2987.1601.gf035232 / Chromium 57.0.2987.133）

PM> Install-Package NetDimension.NanUI

WindowXP版本（CEF 3.2526.1366.g8617e7c / Chromium 47.0.2526.80）

PM> Install-Package NetDimension.NanUI.XP

推薦使用Nuget包管理器安裝NanUI程序集將自動安裝對應的CEF依賴項，一鍵安裝方便使用。

如何編譯源碼和示例

編譯當前版本的NanUI需要支持C#7.0語法的編譯器，推薦的編譯工具有且只有Visual Studio 2017。

如何使用

初始化NanUI

namespace TestApplication{    
using NetDimension.NanUI;  

  static class Program
    {
        [STAThread]        static void Main(string[] args)        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);          
  //初始化CEF: 設置CEF的相關Path
            //如果要使用Nuget自動下載的fx文件夾結構，需要手動指定各個文件夾的路徑

            var result = Bootstrap.Load(PlatformArch.Auto, System.IO.Path.Combine(Application.StartupPath, "fx"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources\\locales"));            
            if (result)
            {                // Load embedded html/css resources in assembly.
                Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly());

                Application.Run(new Form1());

                Application.Exit();
            }

        }
    }
}

使用原生的窗口樣式來使用NanUI

namespace TestApplication{   
 public partial class Form1 : Formium

    {        public Form1()          
  //Load embedded resource index.html and not set form to no border style by the second parameter.
            : base("http://res.app.local/index.html", false)      
    {
            InitializeComponent();
        }
    }
}

使用無邊框模式來使用NanUI

namespace TestApplication{    public partial class Form1 : Formium

    {        public Form1()            //Load embedded resource index.html and set form to no border style by igrone the second parameter or set it to true.
            : base("http://res.app.local/index.html")        {
            InitializeComponent();
        }
    }
}

請注意：如果使用Visual Studio 2015或者更低的版本開發(fā)和調試NanUI應用程序，需要在項目屬性的調試選項卡中關閉“啟用VS承載進程”選項，否則調試時將出現頁面不加載白屏的情況。如圖所示：

以上就是如何使用HTML/CSS/JS來構建.Net Winform應用程序界面，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。