Как использовать CefSharp (Chrome встроенный фреймворк c #) в приложении Winforms

Содержание

1 Требования
2 1) Создайте базовое приложение Winforms и добавьте CefSharp, используя пакет NuGet
3 2) Измените конфигурацию платформы (x86, x64 или AnyCPU)
4 3.1. Использование CEF (в качестве браузера)
5 3.2. Использование CEF (в качестве пользовательского интерфейса)

CefSharp — это самый простой способ встроить полнофункциональный веб-браузер с жалобами на стандарты в ваше приложение на C # или VB.NET. CefSharp имеет элементы управления браузером для приложений WinForms и WPF, а также безголовую (закадровую) версию для проектов автоматизации. CefSharp основан на Chromium Embedded Framework, версии Google Chrome с открытым исходным кодом. Вы можете получить больше информации о проект CefSharp на официальной домашней странице здесь.

Вы можете использовать CefSharp либо как компонент браузера вместо того, чтобы зависеть от версии Internet Explorer, которую ваш пользователь установил на Windows или как предопределенный пользовательский интерфейс вашего приложения. Да, вы можете использовать элементы управления HTML (кнопки, входы) в вашем приложении winforms c # и настраивать их с помощью CSS по своему усмотрению (Bootstrap и т. Д.).

Это ваш шанс сделать красивое приложение для Windows с HTML, Javascript и CSS, давайте начнем.

В этой статье мы будем работать с CefSharp version 49.0, если вы хотите использовать CefSharp version +51 Мы дадим несколько советов, которые вы должны знать о новой версии.

Требования

Visual Studio с диспетчером пакетов NuGet (> = 2010).

1) Создайте базовое приложение Winforms и добавьте CefSharp, используя пакет NuGet

Приступить к созданию приложения Winforms, как вы обычно делаете это для последней версии .NET Framework, ничего сложного, не так ли? Перед установкой убедитесь, что на вашей машине установлено:

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, интерфейс может различаться, просто обязательно установите дистрибутив CefSharp.WinForms от The CefSharp, расположенный в исходном пакете nuget.org, в этом примере мы используем 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.nupkg
OK https://api.nuget.org/packages/cef.redist.x64.3.2623.1401.nupkg 29ms
Installing 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 embebbedChromium
GET https://api.nuget.org/packages/cef.redist.x86.3.2623.1401.nupkg
OK https://api.nuget.org/packages/cef.redist.x86.3.2623.1401.nupkg 31ms
Installing cef.redist.x86 3.2623.1401.

Все любят сообщения успешно, не так ли? Я делаю !

Важно, прежде чем продолжить: Обычно с последней версией CefSharp, после установки рекомендуется использовать пакет Nuget закрыть Visual Studio полностью, а затем снова открыть (поскольку это гарантирует, что ваши ссылки будут отображаться, и у вас будет полный смысл), в противном случае вы получите ошибку:

Не удалось найти тип или имя пространства имен ‘Cefsharp’ (отсутствует директива using или ссылка на сборку?)

2) Измените конфигурацию платформы (x86, x64 или AnyCPU)

После успешной установки, в соответствии с используемой версией CefSharp, вам нужно будет настроить некоторые вещи, чтобы она работала:

A. CefSharp версия 51 и новее

Начиная с CefSharp 51, вы можете работать с CefSharp с помощью AnyCPU, однако он не будет работать в одиночку, поскольку вам нужно будет внести некоторые изменения в 2 конкретных файла. Сначала включите в своем проекте параметр «Предпочитать 32-битную», щелкните правой кнопкой мыши элемент «Свойства» в обозревателе решений (или на панели инструментов «Проект»> «Свойства вашего проекта») и перейдите к строить Вкладка. В общих свойствах установите флажок Prefer 32 Bit:

Затем найдите your-project-name.csproj файл, его можно найти в //your-project-name.csproj и следующий тег в первом файла:

true

Ваш *.csproj файл должен выглядеть так:

Наконец, измените App.config файл, это видно в обозревателе решений вашего проекта в Visual Studio и добавьте следующие теги в тег конфигурации:

Тогда ваш конфигурационный файл будет выглядеть так:

Если вам нужна дополнительная помощь или вы не можете изменить эти файлы, взгляните на вопрос о AnyCPU в Github здесь для получения дополнительной помощи.

B. CefSharp версии 49 и старше (x86 или x64)

С CefSharp 49 или более ранними версиями вам нужно будет предоставить архитектуру вашего проекта, иначе CefSharp не будет работать. Перейдите к изменению конфигурации вашего проекта с помощью менеджера конфигурации.

Как сказал Боромир, целевой платформой вашего проекта не может быть anyCPUдолжно быть либо x86 или же x64иначе вы получите следующее предупреждение в вашей консоли, и ваше приложение не будет компилироваться.

CefSharp.Common does not work correctly on AnyCPU platform. You need to specify platform (x86 / x64).

Перейдите сначала изменить его в Configuration Manager. Щелкните правой кнопкой мыши на обозревателе решений в верхней правой части Visual Studio (прямо в решении) и выберите Менеджер конфигурации:

И выберите платформу, которая соответствует вашим требованиям в проекте:

Обратите внимание, что вам нужно создать x86 или x64, если они не существуют выделение вариант, добавив его, а затем выбрав его.

После базовой конфигурации 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 settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = new ChromiumWebBrowser("http://site.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 component
InitializeChromium();
}

Не забудьте закрыть компонент cef в FormClosing событие вашей формы:

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 component
InitializeChromium();
}
private void Form1_Load(object sender, EventArgs e)
{
}
public void InitializeChromium()
{
CefSettings settings = new CefSettings();
// Initialize cef with the provided settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = new ChromiumWebBrowser("http://site.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 (Bootstrap) пользовательский интерфейс с локальными файлами и манипулировать им с помощью System.

Мы должны включить наши активы HTML в наш проект Visual Studio. Вы можете создавать их непосредственно из Visual Studio или из Windows Explorer, но через Visual Studio это проще, поскольку папка автоматически добавляется в ресурсы проекта.

В этом случае мы будем использовать простой интерфейс начальной загрузки (который включает в себя bootstrap и jQuery), который состоит из следующих каталогов:

После добавления в проект Visual Studio (щелкните правой кнопкой мыши на обозревателе решений, затем в проекте, добавьте папку и вставьте туда свои ресурсы), проект должен выглядеть следующим образом:

Важно: теперь вам нужно выбрать все файлы в каждой папке и выполнить следующее действие:

Выбрать все html,js,css ресурсы внутри папки.
В нижней части установите Copy to Output Directory значение для Copy Always,

Теперь нам нужно настроить CefSharp так, чтобы он указывал на index.html файл вместо WebUrl. Так как теперь наши ресурсы расположены в проекте, вы можете использовать следующий код для получения пути ваших ресурсов:

Обратите внимание, что вам нужно всегда указывать полный локальный путь к вашим файлам. Как обычный проект должен быть в состоянии работать везде, поэтому путь относительно исполняемого файла нашего проекта.

// Now instead use http://site.com as URL we'll use the "page" variable to load our local resource
String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);

Тем не менее, это не будет работать, если вы попытаетесь запустить свое приложение сейчас, вы получите белый экран. Сначала нам нужно:

Предоставьте класс C # для использования в Javascript в качестве объекта.
Разрешить использование локальных файлов (file: //).

Мы собираемся представить класс c # в Javascript, чтобы манипулировать нативными функциями с помощью Javascript. Нам нужно создать новый класс, этот класс ожидает 2 элемента в конструкторе (ChromiumBrowserInstance и The Main Form). Этот класс будет иметь 2 функции: одну для запуска инструментов разработчика Chromium и другую для запуска командной строки Windows (cmd.exe).

Класс должен выглядеть так:

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 thread
private static ChromiumWebBrowser _instanceBrowser = null;
// The form class needs to be changed according to yours
private 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 и запускает процесс 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 settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = 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 browser
BrowserSettings browserSettings = new BrowserSettings();
browserSettings.FileAccessFromFileUrls = CefState.Enabled;
browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
chromeBrowser.BrowserSettings = browserSettings;
}

Мы используем метод File.Exists, чтобы проверить, существует ли предоставленный путь, в противном случае вы сделали что-то не так на предыдущих шагах.

Теперь нам просто нужно выполнить его и предоставить класс в функции InitializeComponent:

public Form1()
{
InitializeComponent();
// Start the browser after initialize global component
InitializeChromium();
// Register an object in javascript named "cefCustomObject" with function of the CefCustomObject class :3
chromeBrowser.RegisterJsObject("cefCustomObject", new CefCustomObject(chromeBrowser, this));
}

Будьте осторожны, если ваш проект находится на другом жестком диске, нежели основной диск, так как при разработке другой путь, а не (C: //), скорее всего потерпит крах.
Обратите внимание RegisterJsObject Функция регистрирует в качестве глобального объекта класс с предоставленным именем в качестве первого параметра. В этом случае глобальный объект в 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 component
InitializeChromium();
// Register an object in javascript named "cefCustomObject" with function of the CefCustomObject class :3
chromeBrowser.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 settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = 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 browser
BrowserSettings 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 Функция создает объект с именем предоставленным в качестве первого параметра. В файле index.html мы собираемся создать следующие кнопки, которые выполняют нативные функции с помощью javascript:

Open Chrome Dev Tools
Open cmd.exe

Не забывайте соблюдать «camelCase», метод в C # должен начинаться с lowerCase и подчиняться правилу camelCase (без подчеркивания _), как показано в классе.

Как вы можете видеть, с CefSharp все в двух направлениях, вы можете легко обрабатывать javascript из c # или c # из javascript.

Теперь запустите ваше приложение и наслаждайтесь элементами управления HTML в виде графического интерфейса пользователя в Windows!

Если вы видите зарегистрированный класс в javascript, вы увидите объект со всеми зарегистрированными методами и функциями как собственный код (equals, getHashCode а также toString автоматически добавляются).

Повеселись