本文概述
- 要求
- 1)创建一个基本的Winforms应用并使用NuGet包添加CefSharp
- 2)更改平台配置(x86, x64或AnyCPU)
- 3.1。使用CEF(作为浏览器)
- 3.2。使用CEF(作为用户界面)
你可以将CefSharp用作浏览器组件, 而不必取决于用户在Windows上安装的Internet Explorer的版本, 也可以将其用作应用程序的预定义用户界面。是的, 你可以在winforms c#应用程序中使用HTML控件(按钮, 输入), 并根据需要使用CSS进行自定义(Bootstrap等)。
这是你使用HTML, Javascript和CSS制作漂亮的本机Windows应用程序的机会, 让我们开始吧。
在本文中, 我们将使用49.0的CefSharp版本, 如果你想使用+51的CefSharp版本, 我们将提供一些新版本需要了解的技巧。
要求
- 带NuGet软件包管理器的Visual Studio(> = 2010)。
- CefSharp 45.0和更高版本要求安装VC 2013可再发行组件包x86。
- 早期版本需要VC 2012可再发行组件包x86。
An unhandled exception of type 'System.IO.FileNotFoundException' occurred in browser.exe Additional information: Could not load file or assembly 'CefSharp.Core.dll' or one of its dependencies.
现在, 在创建之后, 添加CefSharp。要添加CefSharp, 请转到Visual Studio右上角的解决方案资源管理器, 然后右键单击你的应用程序(在解决方案下方), 然后选择” 管理NuGet程序包” 。
文章图片
当出现搜索菜单时, 键入cefsharp, 选择WinForms发行版并安装它。
与Visual Studio的每个版本一样, 界面可能有所不同, 只需确保安装位于nuget.org包源中的CefSharp发行的CefSharp.WinForms发行版, 在本示例中, 我们使用的是Visual Studio 2015
文章图片
遵循安装设置(接受热安装)。在安装过程中, 你应该在控制台中看到有关该过程的相关信息:
Attempting to gather dependency information for package 'CefSharp.WinForms.49.0.1' with respect to project 'embebbedChromium', targeting '.NETFramework, Version=v4.5.2'Attempting to resolve dependencies for package 'CefSharp.WinForms.49.0.1' with DependencyBehavior 'Lowest'Resolving actions to install package 'CefSharp.WinForms.49.0.1'Resolved actions to install package 'CefSharp.WinForms.49.0.1'GET https://api.nuget.org/packages/cef.redist.x64.3.2623.1401.nupkgOK https://api.nuget.org/packages/cef.redist.x64.3.2623.1401.nupkg 29msInstalling cef.redist.x64 3.2623.1401.Adding package 'cef.redist.x64.3.2623.1401' to folder 'F:\C# Development\Winform projects\embebbedChromium\packages'Added package 'cef.redist.x64.3.2623.1401' to folder 'F:\C# Development\Winform projects\embebbedChromium\packages'Added package 'cef.redist.x64.3.2623.1401' to 'packages.config'Successfully installed 'cef.redist.x64 3.2623.1401' to embebbedChromiumGET https://api.nuget.org/packages/cef.redist.x86.3.2623.1401.nupkgOK https://api.nuget.org/packages/cef.redist.x86.3.2623.1401.nupkg 31msInstalling cef.redist.x86 3.2623.1401.
每个人都喜欢成功的消息, 对吗?我做 !
继续操作之前的重要提示:通常, 对于最新版本的CefSharp, 建议在安装Nuget程序包后完全关闭Visual Studio, 然后重新打开(因为这样可以确保你的引用显示出来并具有完整的智能感知能力), 否则最终错误:
【如何在Winforms应用程序中使用CefSharp(Chrome嵌入式框架c#)】找不到类型或名称空间名称” Cefsharp” (你是否缺少using指令或程序集引用?)
文章图片
2)更改平台配置(x86, x64或AnyCPU) 成功安装后, 根据你使用的CefSharp的版本, 你需要配置一些东西以使其运行:
A. CefSharp 51版及更高版本 在CefSharp 51中, 你可以使用AnyCPU使用CefSharp, 但是它不能单独使用, 因为你需要在2个特定文件中进行一些更改。首先, 在项目中启用” 首选32位” 选项, 右键单击解决方案资源管理器中的” 属性” 项目(或在工具栏中的” 项目” > ” 项目属性” 中), 然后转到” 构建” 选项卡。在常规属性中, 选中” 首选32位” 选项:
文章图片
然后, 搜索your-project-name.csproj文件, 可以在< 你的项目名称> / < 你的项目名称> /你的项目名称.csproj中找到文件, 并在第一个< 文件的PropertyGroup> :
<
CefSharpAnyCpuSupport>
true<
/CefSharpAnyCpuSupport>
你的* .csproj文件应如下所示:
文章图片
最后, 修改App.config文件, 该文件在Visual Studio中的项目的解决方案资源管理器中可见, 并在配置标记中添加以下标记:
<
runtime>
<
assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<
probing privatePath="x86"/>
<
/assemblyBinding>
<
/runtime>
然后, 你的配置文件将如下所示:
文章图片
如果你需要更多帮助或无法修改这些文件, 请在此处查看有关Github中AnyCPU的问题以获取更多帮助。
B. CefSharp 49版及更早版本(x86或x64) 对于CefSharp 49或更旧的版本, 你需要提供项目的体系结构, 否则CefSharp将无法正常工作。继续使用配置管理器更改项目的配置。
文章图片
正如boromir所说, 你的项目的目标平台不能是任何CPU, 它必须是x86或x64, 否则你将在控制台中收到以下警告, 并且你的应用程序将无法编译。
CefSharp.Common does not work correctly on AnyCPU platform. You need to specify platform (x86 / x64).
继续先在配置管理器中进行更改。右键单击Visual Studio右上方区域的解决方案资源管理器(在解决方案中为Direct), 然后选择配置管理器:
文章图片
并选择与项目中的需求相匹配的平台:
文章图片
请注意, 如果不存在x86或x64, 则需要创建它们, 请选择< New … > 选项, 将其添加然后选择。
在你的项目中对CefSharp进行基本配置之后, 该项目将成功构建, 因为我们拥有使用铬所需的一切。现在, 我们只需要添加到表单中并与代码一起使用即可。
3.1。使用CEF(作为浏览器) 现在我们的应用程序已经支持CefSharp, 我们只需要在代码中使用它即可。使用以下命令将CefSharp导入到你的代码中:
using CefSharp;
using CefSharp.WinForms;
现在添加以下方法, 并在你的类中创建一个类可访问变量作为浏览器(以在其他方法中使用):
public ChromiumWebBrowser chromeBrowser;
public void InitializeChromium(){CefSettings settings = new CefSettings();
// Initialize cef with the provided settingsCef.Initialize(settings);
// Create a browser componentchromeBrowser = new ChromiumWebBrowser("http://ourcodeworld.com");
// Add it to the form and fill it to the form window.this.Controls.Add(chromeBrowser);
chromeBrowser.Dock = DockStyle.Fill;
}
并在你类的InitializeComponent()函数之后执行它(通常在构造函数中):
public Form1(){InitializeComponent();
// Start the browser after initialize global componentInitializeChromium();
}
不要忘记在表单的FormClosing事件中关闭cef组件:
private void Form1_FormClosing(object sender, FormClosingEventArgs e){Cef.Shutdown();
}
现在你的类应如下所示(请注意, 该项目的名称为embebbedChromium):
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;
namespace embebbedChromium{public partial class Form1 : Form{public ChromiumWebBrowser chromeBrowser;
public Form1(){InitializeComponent();
// Start the browser after initialize global componentInitializeChromium();
}private void Form1_Load(object sender, EventArgs e){}public void InitializeChromium(){CefSettings settings = new CefSettings();
// Initialize cef with the provided settingsCef.Initialize(settings);
// Create a browser componentchromeBrowser = new ChromiumWebBrowser("http://ourcodeworld.com");
// Add it to the form and fill it to the form window.this.Controls.Add(chromeBrowser);
chromeBrowser.Dock = DockStyle.Fill;
}private void Form1_FormClosing(object sender, FormClosingEventArgs e){Cef.Shutdown();
}}}
现在启动你的应用程序(F5)或在工具栏中单击” 开始” , 你将看到如何在C#Winforms应用程序中加载” 我们的代码世界” 。
文章图片
恭喜你!你刚刚以最基本的表达方式在应用程序中实现了CefSharp。我们建议你继续阅读框架文档, 并了解如何创建更出色的东西。
3.2。使用CEF(作为用户界面) 在上一点中, 你已经将CefSharp实现为浏览器组件。但是, 你还可以做更多的事情, 现在我们将使用本地文件实现纯HTML, Javascript和CSS(引导)UI并使用它来处理System事物。
我们需要在我们的Visual Studio项目中包含HTML资产。你可以直接从Visual Studio或Windows资源管理器中创建它们, 但通过Visual Studio则更容易, 因为该文件夹会自动添加到项目资源中。
在这种情况下, 我们将使用一个简单的Bootstrap接口(包括Bootstrap和jQuery), 该接口由以下目录组成:
文章图片
添加Visual Studio项目后(右键单击解决方案资源管理器, 然后在该项目上, 添加文件夹并将你的资源粘贴到此处), 该项目应如下所示:
文章图片
重要提示:现在, 你需要选择每个文件夹中的所有文件, 并执行以下操作:
- 选择文件夹内的所有html, js, css资源。
- 在底部, 将” 复制到输出目录” 值设置为” 始终复制” 。
文章图片
现在我们需要设置CefSharp指向我们的index.html文件而不是一个webUrl。现在我们的资源位于项目中, 你可以使用以下代码获取资源的路径:
请注意, 你需要始终提供文件的完整本地路径。由于普通项目需要能够在任何地方工作, 因此路径相对于我们项目的可执行文件。
// Now instead use http://ourcodeworld.com as URL we'll use the "page" variable to load our local resourceString page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
但是, 这还行不通, 如果你现在尝试执行应用, 则会出现白屏。我们首先需要:
- 将要在Javascript中使用的C#类公开为一个对象。
- 允许使用本地文件(file://)。
该类应如下所示:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using System.Diagnostics;
namespace embebbedChromium{class CefCustomObject{// Declare a local instance of chromium and the main form in order to execute things from here in the main threadprivate static ChromiumWebBrowser _instanceBrowser = null;
// The form class needs to be changed according to yoursprivate static Form1 _instanceMainForm = null;
public CefCustomObject(ChromiumWebBrowser originalBrowser, Form1 mainForm){_instanceBrowser = originalBrowser;
_instanceMainForm = mainForm;
}public void showDevTools(){_instanceBrowser.ShowDevTools();
}public void opencmd(){ProcessStartInfo start = new ProcessStartInfo("cmd.exe", "/c pause");
Process.Start(start);
}}}
此类将在Javascript中公开。稍后你将看到, 它是非常基本的, 显示了chrome浏览器的dev工具, 并启动了cmd.exe进程。
现在, 我们的InitializeChromium函数应如下所示:
public void InitializeChromium(){CefSettings settings = new CefSettings();
// Note that if you get an error or a white screen, you may be doing something wrong !// Try to load a local file that you're sure that exists and give the complete path instead to test// for example, replace page with a direct path instead :// String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";
String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
//String page = @"C:\Users\SDkCarlos\Desktop\artyom-HOMEPAGE\index.html";
if (!File.Exists(page)){MessageBox.Show("Error The html file doesn't exists : "+page);
}// Initialize cef with the provided settingsCef.Initialize(settings);
// Create a browser componentchromeBrowser = new ChromiumWebBrowser(page);
// Add it to the form and fill it to the form window.this.Controls.Add(chromeBrowser);
chromeBrowser.Dock = DockStyle.Fill;
// Allow the use of local resources in the browserBrowserSettings browserSettings = new BrowserSettings();
browserSettings.FileAccessFromFileUrls = CefState.Enabled;
browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
chromeBrowser.BrowserSettings = browserSettings;
}
我们使用File.Exists方法来查看Providen路径是否存在, 否则在前面的步骤中你做错了什么。
现在我们只需要执行它, 并在InitializeComponent函数中公开该类:
public Form1(){InitializeComponent();
// Start the browser after initialize global componentInitializeChromium();
// Register an object in javascript named "cefCustomObject" with function of the CefCustomObject class :3chromeBrowser.RegisterJsObject("cefCustomObject", new CefCustomObject(chromeBrowser, this));
}
- 如果你的项目与主磁盘位于不同的硬盘中, 请小心, 因为在开发中, 其他路径而不是(C://)很有可能失败。
- 请注意, RegisterJsObject函数将全局类注册为以Providen名称作为第一个参数的类。在这种情况下, Javascript中的全局对象将是cefCustomObject。
using System;
using System.IO;
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 System.Runtime.InteropServices;
namespace embebbedChromium{public partial class Form1 : Form{public ChromiumWebBrowser chromeBrowser;
public Form1(){InitializeComponent();
// Start the browser after initialize global componentInitializeChromium();
// Register an object in javascript named "cefCustomObject" with function of the CefCustomObject class :3chromeBrowser.RegisterJsObject("cefCustomObject", new CefCustomObject(chromeBrowser, this));
}private void Form1_Load(object sender, EventArgs e){chromeBrowser.ShowDevTools();
}public void InitializeChromium(){CefSettings settings = new CefSettings();
// Note that if you get an error or a white screen, you may be doing something wrong !// Try to load a local file that you're sure that exists and give the complete path instead to test// for example, replace page with a direct path instead :// String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";
String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
//String page = @"C:\Users\SDkCarlos\Desktop\artyom-HOMEPAGE\index.html";
if (!File.Exists(page)){MessageBox.Show("Error The html file doesn't exists : "+page);
}// Initialize cef with the provided settingsCef.Initialize(settings);
// Create a browser componentchromeBrowser = new ChromiumWebBrowser(page);
// Add it to the form and fill it to the form window.this.Controls.Add(chromeBrowser);
chromeBrowser.Dock = DockStyle.Fill;
// Allow the use of local resources in the browserBrowserSettings browserSettings = new BrowserSettings();
browserSettings.FileAccessFromFileUrls = CefState.Enabled;
browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
chromeBrowser.BrowserSettings = browserSettings;
}private void Form1_FormClosing(object sender, FormClosingEventArgs e){Cef.Shutdown();
}}}
如前所述, 要处理Javascript部分, RegisterJsObject函数将创建一个名称为Providen作为第一个参数的对象。在index.html文件中, 我们将创建以下按钮, 这些按钮使用javascript执行本机功能:
<
button class="btn btn-info" onclick="cefCustomObject.showDevTools();
">
Open Chrome Dev Tools<
/button>
<
button class="btn btn-primary" onclick="cefCustomObject.opencmd();
">
Open cmd.exe<
/button>
记住要尊重” camelCase” , C#中的方法需要以lowerCase开头, 并遵守camelCase规则(没有下划线_), 如该类所示。
如你所见, 借助CefSharp, 一切都是双向的, 你可以轻松地从c#处理javascript或从javascript处理c#。
现在启动你的应用程序, 并在Windows中将HTML控件用作图形用户界面!
文章图片
如果你在javascript中看到已注册的类, 你将看到具有所有已注册方法和功能的对象作为本机代码(等于, 自动添加getHashCode和toString)。
文章图片
玩得开心
推荐阅读
- 如何在C#和WinForms中操作和使用JSON
- 如何在Windows中使用PuTTY在远程服务器(Linux和Ubuntu)上执行.sh脚本
- 什么是FTPS,FTP,SFTP,它们之间有什么区别
- 使用readme.md文件中的Github Markdown可能不知道的提示和技巧
- 使用PHPExcel使用图表生成的Excel文件会因Symfony中的流响应而损坏-PHP
- 如何在Symfony中获取教条查询状态(信息)
- 在Symfony 3中的表单上实现Google reCAPTCHA
- 终极版/反应。实现后,combineReducers无法获得app的状态
- Android / Java,如何在某些字段中使用换行和逗号来处理csv文件()