NanUI for Winform發佈，讓Winform界面設計擁有無限可能

如今，儘管WPF、UWP大行其道，大有把Winform打殘幹廢的趨勢。但是還是有那麼一波頑固不化的老傢伙們固守着Winform，其中就包括我。

好吧，既然都說Winform做得軟件不如WPF界面美觀效果絢麗，那麼我們就找一個方法讓Winform也擁有漂亮的界面。DevExpress和ComponentOne都是不錯的選擇，Telerik雖說是做Asp.net組件出生的，但是他家的UI for Winform做得也很不錯。稍等，那問題來了，這些組件收費昂貴不說，而且是年付，起價都得幾百美刀。對於我這種盧瑟程序員來說，是支付不起這樣高昂的費用的。那有人要說了，你咋不用破解版的呢？是的，可以用，而且也在用，但是這樣一來我的內心是無比糾結的，用破解的盜版的，我就得欠另外那羣程序員一大個人情，我這人雖然盧瑟，不喜歡欠別人人情！開個玩笑而已：）那麼，有沒有什麼開源的，免費的，好用的解決方案呢？

研究了一段時間，本人發現用瀏覽器做殼用HTML和CSS呈現軟件界面是一種新趨勢，當然這裏指的瀏覽器不是.net自己帶的WebBroswer控件，原因不用我多說，大家都明白。這裏說的是大名鼎鼎的CEF——Chromium Embedded Framework，通俗點也就是谷歌瀏覽器的核心了。CEF作爲一個開源的瀏覽器核心組件對HTML5、CSS3和JS標準的支持不用我過多介紹，都是極好的。目前很多大廠都在使用CEF作爲軟件界面呈現，比如鵝廠大名鼎鼎的微信桌面版，網易的雲音樂等等。所以，如果將CEF引入Winform作爲界面呈現也是可行的。

CEF的.net實現衆多，最後相中了CefSharp和ChromimunFX兩個開源項目，對比之，CefSharp除了傳統的瀏覽器功能外還實現了離屏渲染，但是作爲Winform忠狗的我來說，我並不需要離屏渲染這項高端技術。最終ChromiumFX使用PInvoke的方式調用CEF的API，更接近“原生”，也更利於定製。經過個把月的披星戴月，在ChromiumFX的基礎上本人完成了自己的CEF界面封裝，暫時命名爲NanUI for Winform，目前處於預覽階段。

那麼，下面就來看看本人封裝的NanUI完成了什麼工作。上圖先~~

 

NanUI for Winform

NanUI目前處於預覽開發階段，還有一些問題並未解決，因此暫時不傳GitHub，等穩定一些會考慮開放源代碼。

目前實現的功能：

• 無標題窗口
• 支持css標記-webkit-app-region:drag|nodrag標記
• 支持網頁資源打包內嵌
• 支持編譯Any Cpu類型的項目
• 其他ChromiumFX該有的功能

那麼，下面分項介紹上面列舉的功能。

無標題窗口

你以爲這裏的無標題窗口就是單純的把FormBorderStyle設置爲None嗎？當然不是。實現基礎是調用DWM的DwmExtendFrameIntoClientArea，然後重繪了下窗口的邊框，處理了各種鼠標事件。那有人要問了，那作着些事情不是狗解手嗎，直接FormBorderStyle設置個None不就解決了？是的，這是可以解決，但是窗口就喪失了各種投影效果，各種放大縮小的效果。其次，還有各種鼠標消息和HITTEST消息，需要從ChromiumFX中傳遞到窗體上，要不然ChromiumFX一旦Dock然後Fill到窗口上，窗口還會相應鼠標事件纔怪。所以，作爲UI的基礎，拖拽、放大、縮小等基本的操作都實現了。

支持css標記-webkit-app-region:drag|nodrag標記

在網頁元素的css裏打上“-webkit-app-region:drag”標記，就可以實現拖動該元素來移動窗體。

如圖所示，需要拖動的地方，就是drag，在標記過drag的元素上某些不給拖動的位置（例如關閉，最大化，最小化按鈕位置）打上no-drag就拖動不了了。

其他沒標記的地方隨意，拖動事件會直接交給JS。

支持網頁資源打包內嵌

NanUI支持將做好的網頁html、css、js、圖片等文件直接作爲嵌入資源編譯到當前項目或者獨立的DLL中，框架會自動調用嵌入的網頁資源。既然用HTML做界面，HTML暴露在外被別人想改就改，那這個軟件跟鹹魚有什麼區別？所以網頁文件作爲內嵌資源功能被作爲NanUI的核心功能之一，資源內嵌後，再給程序集加個強命，那要改你的軟件就沒那麼簡單了吧。

 

支持編譯Any Cpu類型的項目

這也是本人爲什麼不選擇CefSharp的的原因之一，CefSharp只支持編譯成單一目標，非常不方便。ChromiumFX能夠自動識別客戶機環境加載對於的x86或是x64庫。在此基礎上NanUI擴展了自動下載CEF相關文件的功能，換句話說，發佈項目的時候只需要發佈項目本身生成的程序和程序集就可以了，軟件首次在客戶機運行時，會根據客戶機的環境自動從指定網絡位置下載CEF的相關文件，這樣的好處就是軟件發佈的時候不用在軟件本身內置CEF相關文件，極大的減小了打包文件的大小，而且不用去考慮客戶機是32位系統還是64位系統，簡化發佈流程。例如微信Windows客戶端，安裝包30多兆，其中至少25M是CEF相關文件，而且，微信客戶端只有一個x86的版本，NanUI很好的規避了這個問題，文章最後的示例程序可以很好的證明這點。

其他ChromiumFX該有的功能

最開始我就說了NanUI基於ChromiumFX開發，ChromiumFX本來應該有什麼樣的功能，NanUI就支持什麼樣的功能。要實現網頁JS調用C#的類、方法等，C#操作網頁DOM元素等，都可以通過ChromiumFX來實現。更多的功能，將會在後面的文章來介紹。

 

 

NanUI的基本功能就是上面說的這些。有了NanUI對Winform程序的支持，想做什麼樣的界面都可以實現了，不論是模仿個微信Window客戶端、網易雲音樂，還是模擬下Win10裏UWP那種款式的應用都是不在話下的。

下面，我講介紹下NanUI的基本使用方法。

 

NanUI文件結構

NetDimension.NanUI.dll
NetDimension.ZipCompress.dll

NanUI結構非常簡單，“NetDimension.NanUI.dll”封裝了ChromiumFX的全部內容並做了一些必要的修改，除此之外的其他內容就是NanUI的核心部分了。“NetDimension.ZipCompress.dll”是一個操作Zip文件的庫，內容剽竊自DotNetZip，並做了一些修改。在此特別說明下，不論CEF、ChromiumFX還是DotNetZip都採用BSD開源協議，協議允許我對上述項目進行剽竊、修改和隨便用於商業目的，哦呵呵，所以別罵我無恥。

迴歸正題，在新建項目中引用“NetDimension.NanUI.dll”庫即可。“NetDimension.ZipCompress.dll”僅作爲需要遠程下載CEF庫時做解壓ZIP文件用，實際項目中並不需要引用，如果項目發佈時已在本地內嵌CEF框架，那麼這個解壓縮的庫不需要隨軟件分發。

在此特別說明下CEF框架的文件夾結構：

fx與程序集放置在同一層級，如果項目編譯時特意選擇了x86架構或x64架構時，另外一種架構的文件夾是不需要存在的，僅當項目編譯類型爲any cpu時需要x86和x64文件同時存在，NanUI會根據客戶機的運行環境來自動選擇加載x86或是x64架構的CEF庫。當fx存在的時候NanUI將不會啓用CEF庫下載的特性，僅當fx文件夾內的CEF框架不存在時，NanUI纔會自動從遠程服務器下載CEF框架文件。

接下來，在Main函數中做一些簡單的初始化的工作。

[STAThread]
static void Main()
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);

    UIStartupManager.UseSharedFramework = true;

    if(UIStartupManager.InitializeChromium(args=> {
        args.Settings.LogSeverity = Chromium.CfxLogSeverity.Default;
        //這裏可以對CEF進行一些設定
                
    },args=> {
        Console.WriteLine(args.CommandLine);
        //輸出命令行開關，看看啓用或是禁用了哪些功能
    }))
    {
        //初始化成功，加載程序集內嵌的資源到運行時中，當然也可以加載其他程序集裏面的資源。
        UIStartupManager.RegisterEmbeddedScheme(System.Reflection.Assembly.GetExecutingAssembly());

        //啓動主窗體
        Application.Run(new frmWelcome());
    }
}

主窗體

public partial class frmWelcome : HtmlUIForm    //繼承HtmlUIForm
{
    frmAbout aboutForm = null;
    public frmWelcome()
        : base("embedded://www/index.html")    //設定啓示頁面，scheme是embedded就是我們在Main裏註冊的當前程序集資源
    {
        InitializeComponent();

        //在js中註冊一個方法來打開About窗口
        UI.GlobalObject.AddFunction("showAboutForm").Execute += (sender, args) =>
        {
            ShowAboutWindow();
        };


        //網頁加載完成時觸發事件
        UI.LoadHandler.OnLoadEnd += (sender, args) =>
        {
            //判斷下觸發的事件是不是主框架的
            if(args.Frame.IsMain)
            {
                //執行JS，將當前的CEF運行版本等信息通過JS加載到網頁上
                var js = $"$client.setRuntimeInfo({{ api: ['{CfxRuntime.ApiHash(0)}', '{CfxRuntime.ApiHash(1)}'], cef:'{CfxRuntime.GetCefVersion()}', chrome:'{CfxRuntime.GetChromeVersion()}',os:'{CfxRuntime.PlatformOS}', arch:'{CfxRuntime.PlatformArch}'}});";
                UI.ExecuteJavascript(js);
            }
                

        };

    }

    private void ShowAboutWindow()
    {
        //因爲當前環境中的JS代碼跑在另外的線程上，所以在Control上擴展個UpdateUI方法，簡化InvokeRequired流程
        this.UpdateUI(() =>
        {
            //顯示字窗體的過程，不解釋
            if (aboutForm == null || aboutForm.IsDisposed)
            {
                aboutForm = new frmAbout();
                aboutForm.Show(this);
            }
            else
            {
                aboutForm.Activate();
            }

        });
    }
}

 

就是這麼簡單幾步，漂亮的HTML界面加載到了你的Winform上，當然，前提是你得先有個“漂亮”的HTML界面先：）

好了，就像上面的圖片裏展示的一樣，通過NanUI，Winform同樣能夠做出像其他兩款軟件那樣的界面了。NanUI的預覽版就先介紹到這裏。在後續的文章中，我將以項目的形式再來深度的介紹NanUI在Winform中的各種運用。

下面的會提供上述圖片中展示的DEMO程序及源代碼提供給有興趣的朋友下載把玩。

DEMO是用VS2015在Win10下編寫的，.net需要4.5版本（Win10免安裝，其他系統自行Google下載安裝）能夠運行。

感謝觀看，謝謝大家，歡迎拍磚。

 

-------------------------------------------------- 分隔線 ----------------------------------------------------

應園友的要求，把NanUI所用技術的開源連接放置在此：

ChromiumFX - https://bitbucket.org/chromiumfx/chromiumfx

DotNetZip - https://github.com/haf/DotNetZip.Semverd .net 4.5的System.IO.Compress下面有操作Zip的類，正考慮要不要換成.net自帶的，換了以後整個項目就只支持4.5了。

另外一個CEF的.net實現

CefSharp - https://github.com/cefsharp/CefSharp/ NanUI最初的版本使用CefSharp作爲基礎，但是有些問題始終解決不了，才又轉到ChromiumFX的。

轉載自：http://www.cnblogs.com/linxuanchen/p/ChromiumFX-based-NanUI-for-Winform-has-been-published.html