如何用Web技术开发Windows Form应用

现在H5很热,很多互联网公司的产品都采用混合编程,其中各个平台客户端的“壳”为原生控件,但是内容很多都是Web网页,因此可以做出很多炫酷的效果。随着Node.js和Ionic等框架的出现,现在感觉JavaScript有一统Web、Mobile、PC三大平台应用开发的能力。在Windows Form 上,利用开源浏览器内核Chromium Embedded Framework (CEF),CEF可以实现C#调用JS,JS调用C#,可以很好的与Web进行应用交互。下面用一个简单的例子来说明。

1 项目库


新建一个Windows Form项目,并用NuGet包管理器下载需要的库cefsharp,具体如下图所示:

如何用Web技术开发Windows Form应用注意:cefsharp必须生成32或者64位的应用程序,这里请自行配置。

2 代码实现


  为了界面好看,这里用到一个MaterialSkin框架来美化UI,可以利用同样的方法进行下载。由于此处用到了MaterialSkin库,它会将窗体的边框隐藏,并自行实现了一个窗体边框。如果直接将ChromiumWebBrowser控件实例化后添加到窗体上,会出现显示不全的问题。为了解决这个问题,在窗体上放入一个panel,调整到合适大小,将ChromiumWebBrowser控件实例化后添加到panel中即可。示例核心代码如下所示:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using MaterialSkin;
using MaterialSkin.Controls;
namespace cefWinForm
{
    public partial class Form1:MaterialForm
    {
        private ChromiumWebBrowser myBrowser = null;
        public Form1()
        {
            InitializeComponent();
            ChromeDevToolsSystemMenu.CreateSysMenu(this);
            var materialSkinManager = MaterialSkinManager.Instance;
            materialSkinManager.AddFormToManage(this);
            materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
            materialSkinManager.ColorScheme =
                new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);

        }
        //Note: The function calls Cef.Initialize(); and Cef.Shutdown();
        //only need to be called once in the application.
        private void Form1_Load(object sender, EventArgs e)
        {
            Cef.Initialize();
            myBrowser = new ChromiumWebBrowser("http://127.0.0.1/");
            myBrowser.BrowserSettings.DefaultFontSize = 12;
            //myBrowser.BrowserSettings.AcceptLanguageList = "zh-CN,en-US";
            // this.Controls.Add(myBrowser);
            this.pcontainer.Controls.Add(myBrowser);

        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            //在退出主程序时,需要首先关闭Cef
            Cef.Shutdown();
        }

        private void devToolsToolStripMenuItem_Click(object sender, EventArgs e)
        {
            if (myBrowser != null)
            {
                //开发者工具
                myBrowser.ShowDevTools();
            }
        }

        private void devToolsToolStripMenuItem1_Click(object sender, EventArgs e)
        {
            if (myBrowser != null)
            {
                myBrowser.ShowDevTools();
            }
        }

        protected override void WndProc(ref Message m)
        {
            base.WndProc(ref m);

            // Test if the About item was selected from the system menu
            if ((m.Msg == ChromeDevToolsSystemMenu.WM_SYSCOMMAND) &&
               ((int)m.WParam == ChromeDevToolsSystemMenu.SYSMENU_CHROME_DEV_TOOLS))
            {
                myBrowser.ShowDevTools();
            }
        }
    }
}

这里用new ChromiumWebBrowser("http://127.0.0.1/")创建了一个基于Chromium的WebBrowser,地址为http://127.0.0.1/,这样就相当于本地的一个浏览器。基于H5创建的程序,有一个天然的好处就是,程序的更新可以在服务器端完成,客户端无需升级,即可完成功能的迭代。另外,就是基于CEF框架,内置的浏览器版本,相对可控,这样也从另一方面,解决了传统Web应用兼容多种浏览器的相关问题。

3 效果


运行此示例,相关界面如下所示:

如何用Web技术开发Windows Form应用

上一篇:Photoshop和WPF双剑配合,打造炫酷个性的进度条控件


下一篇:Erjang —— 让你在 Java 中执行 Erlang 程序