在 WinForms 应用程序中使用 HTML 作为 UI 元素，借助 Chrome / Chromium 嵌入式框架 (CEF)

内置 C# Web 浏览器控件

该控件实际上可以与 JavaScript 进行调用，反之亦然。该控件的问题在于，你被绑定到宿主操作系统上安装的 Internet Explorer 版本，并且没有运行时调试功能。

https://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser%28v=vs.110%29.aspx

HTML Renderer

这是一个很棒的小框架。它轻量级，仅包含 2 个 .DLL 文件。但是，我无法确定是否可以调用 JavaScript 或 JavaScript 是否可以调用回 C# 代码（我认为它不包含 JS 引擎）。

https://htmlrenderer.codeplex.com/

Awesomium HTML UI 引擎

它看起来很棒，并且拥有自己的 API。但我排除了它，因为它看起来是 Chromium 之上的一个 API。在这篇文章中，我决定研究 Chromium 和 CEF 框架。

http://www.awesomium.com/

GeckoFX

GeckoFX 使用 Firefox 引擎。它看起来也很棒。与 Chromium 一样，它是一个开源的、完整的现代浏览器实现。

https://bitbucket.org/geckofx

private void Form1_Load(object sender, EventArgs e)
{
    Cef.Initialize();
    ChromiumWebBrowser myBrowser = new ChromiumWebBrowser("http://www.maps.google.com" );
    this.Controls.Add(myBrowser);
}

private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
    Cef.Shutdown();
}

private void buttonShowDevTools_Click(object sender, EventArgs e)
{
    m_chromeBrowser.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))
    {
        m_chromeBrowser.ShowDevTools();
    }
}

private void buttonCustomHTML_Click(object sender, EventArgs e)
{
    m_chromeBrowser.LoadHtml( "Hello world" , "http://customrendering/" );
}

public class Person
{
    public Person( string firstName, string lastName, DateTime birthDate)
    {
        FirstName = firstName;
        LastName = lastName;
        DateOfBirth = birthDate;
    }

    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime DateOfBirth { get; set; }
    public int SkillLevel { get; set; }
}

public class JavaScriptInteractionObj
{
    public Person m_theMan = null;

    public JavaScriptInteractionObj()
    {
        m_theMan = new Person( "Bat", "Man" , DateTime .Now);
    }

    public string SomeFunction()
    {
        return "yippieee";
    }

    public string GetPerson()
    {
        var p1 = new Person( "Bruce", "Banner" , DateTime .Now );

        string json = JsonConvert.SerializeObject(p1);
        return json;
    }

    public string ErrorFunction()
    {
        return null;
    }

    public string GetListOfPeople()
    {
        List< Person> peopleList = new List< Person>();

        peopleList.Add( new Person( "Scooby", "Doo" , DateTime .Now));
        peopleList.Add( new Person( "Buggs", "Bunny" , DateTime .Now));
        peopleList.Add( new Person( "Daffy", "Duck" , DateTime .Now));
        peopleList.Add( new Person( "Fred", "Flinstone" , DateTime .Now));
        peopleList.Add( new Person( "Iron", "Man" , DateTime .Now));

        string json = JsonConvert.SerializeObject(peopleList);
        return json;
    }
 }

private void buttonRegisterCSharpObject_Click(object sender, EventArgs e)
{
    m_chromeBrowser.RegisterJsObject( "winformObj", new JavaScriptInteractionObj());

    string page = string.Format("{0}HTMLEmbeddedResources/html/WinformInteractionExample.html" , 
                  EmbeddedResourceUtils.GetAppLocation());
    m_chromeBrowser.Load(page);
}

function CallWinformFunc()
{
     var list = winformObj.getListOfPeople(); // Call C# Function
     for (var nLoopCnt = 0; nLoopCnt < list.length; nLoopCnt++) {
           var person = list[nLoopCnt];
     }
}<button onclick="CallWinformFunc()">Test Winform Interaction</button>

private void buttonExecJavaScriptFromWinforms_Click(object sender, EventArgs e)
{
    var script = "document.body.style.backgroundColor = 'red';";

    m_chromeBrowser.ExecuteScriptAsync(script);
}

function tempFunction() {
    var w = window.innerWidth;
    var h = window.innerHeight;

    return w*h;
}
tempFunction();

private void buttonReturnDataFromJavaScript_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("function tempFunction() {");
    sb.AppendLine("     var w = window.innerWidth;");
    sb.AppendLine("     var h = window.innerHeight;");
    sb.AppendLine("");
    sb.AppendLine("     return w*h;");
    sb.AppendLine("}");
    sb.AppendLine("tempFunction();");

    var task = m_chromeBrowser.EvaluateScriptAsync(sb.ToString());

    task.ContinueWith(t =>
    {
        if (!t.IsFaulted)
        {
            var response = t.Result;

            if ( response.Success == true )
            {
                MessageBox.Show( response.Result.ToString() );
            }
        }
    }, TaskScheduler.FromCurrentSynchronizationContext());
}

private void buttonReturnDataFromJavaScript2_Click(object sender, EventArgs e)
{
    // Step 01: create a simple html page (include jquery so we have access to json object
    StringBuilder htmlPage = new StringBuilder();
    htmlPage.AppendLine("");
    htmlPage.AppendLine("");
    htmlPage.AppendLine("");
    htmlPage.AppendLine("");
    htmlPage.AppendLine("Hello world 2");
    htmlPage.AppendLine("");
 
    // Step 02: Load the Page
    m_chromeBrowser.LoadHtml(htmlPage.ToString(), "http://customrendering/");
 
    // Step 03: Define and Execute some ad-hoc JS that returns an object back to C#
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("function tempFunction() {");
    sb.AppendLine("     // create a JS object");
    sb.AppendLine("     var person = {firstName:'John', lastName:'Maclaine', age:23, eyeColor:'blue'};");
    sb.AppendLine("");
    sb.AppendLine("     // Important: convert object to string before returning to C#");
    sb.AppendLine("     return JSON.stringify(person);");
    sb.AppendLine("}");
    sb.AppendLine("tempFunction();");
 
    var task = m_chromeBrowser.EvaluateScriptAsync(sb.ToString());
 
    task.ContinueWith(t =>
    {
        if (!t.IsFaulted)
        {
            // Step 04: Recieve value from JS
            var response = t.Result;
 
            if (response.Success == true)
            {
                // Use JSON.net to convert to object;
                MessageBox.Show(response.Result.ToString());
            }
        }
    }, TaskScheduler.FromCurrentSynchronizationContext());
}

Chromium 嵌入式框架的维基百科条目

http://en.wikipedia.org/wiki/Chromium_Embedded_Framework

在 WPF 和 CefSharp 中显示 HTML，作者：Dirkster99 和 Alex Maitland

https://codeproject.org.cn/Articles/881315/Display-HTML-in-WPF-and-CefSharp-Tutorial-Part
https://codeproject.org.cn/Articles/887148/Display-HTML-in-WPF-and-CefSharp-Tutorial-Part

Stack Overflow 上关于用更好的浏览器替换 .NET WebBrowser 控件的精彩讨论。其中讨论了许多替代方案。

http://stackoverflow.com/questions/790542/replacing-net-webbrowser-control-with-a-better-browser-like-chrome

CefSharp 常见问题解答

https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions

.NET 包装器，用于替代 Awesomium、Web-Browser 框架

https://github.com/khrona/AwesomiumSharp
http://docs.awesomium.net/
http://wiki.awesomium.net/

WebGL 演示

http://www.bongiovi.tw/experiments/webgl/blossom/

Canvas 气泡

http://blog.hostgrenade.com/2012/04/25/html5-canvas-bubble-demo-v2/

Bootstrap 表单验证示例。

http://formvalidation.io

本文档中的动画 GIF 是使用 GifCam 创建的

http://blog.bahraniapps.com/gifcam/

描述

文件

注释

CEF 核心库

libcef.dll

Unicode 支持

icudtl.dat

本地化资源

locales/ 目录

包含 WebKit UI 控件的本地化字符串。
一个 .pak 文件将根据 CefSettings.locale 值从该文件夹加载。

只需分发已配置的语言环境。如果没有配置语言环境，将使用默认语言环境“en-US”。

可以使用 CefSettings.pack_loading_disabled 完全禁用语言环境文件加载。可以使用 CefSettings.locales_dir_path 自定义语言环境文件夹路径。

其他资源

cef.pak
cef_100_percent.pak
cef_200_percent.pak devtools_resources.pak

包含 WebKit 图像和检查器资源。Pack 文件加载可以

• 使用 CefSettings.pack_loading_disabled 完全禁用。
• 可以使用 CefSettings.resources_dir_path 自定义资源目录路径。

FFmpeg 音频和视频支持

ffmpegsumo.dll

没有此组件，HTML5 音频和视频将无法工作。

PDF 支持

pdf.dll

没有此组件，打印将无法工作。

Angle 和 Direct3D 支持

d3dcompiler_43.dll（Windows XP 所需）
d3dcompiler_47.dll（Windows Vista 及更新版本所需）
libEGL.dll
libGLESv2.dll

没有这些组件，HTML5 加速内容，如 2D Canvas、3D CSS 和 WebGL 将无法工作。

Windows Vista 64 位沙盒支持（仅限 32 位发行版）

wow_helper.exe

没有此组件，CEF 的 32 位版本将在启用沙盒的 64 位 Vista 计算机上运行。