CefSharp: создаём свой браузер на WPF — полная пошаговая презентация

🌐 CefSharp: Создаём свой браузер на WPF

Пошаговая презентация для студентов и начинающих разработчиков

🎯 Что мы научимся делать?
• Создавать проект WPF с нуля.
• Устанавливать и настраивать CefSharp.
• Писать код для полноценного браузера с адресной строкой, кнопками назад/вперёд.
• Отлаживать и публиковать приложение.

📌 Почему CefSharp? Встроенный WebBrowser использует устаревший Internet Explorer. CefSharp — это современный Chromium (тот же движок, что в Google Chrome).

📁 Шаг 1. Создаём проект WPF

Выбираем правильный шаблон и версию .NET

В Visual Studio 2022/2026:
1. Создать новый проект.
2. Поиск → WPF.
3. Выбрать «Приложение WPF (Майкрософт)» (не .NET Framework!).
4. Название: MyBrowser.
5. Целевая платформа: .NET 8.0 (долгосрочная поддержка).

✅ Visual Studio создаст два файла:
- MainWindow.xaml  (дизайн окна)
- MainWindow.xaml.cs (код)
            

💡 .NET 8.0 — самая стабильная версия на сегодня. CefSharp отлично с ней работает.

📦 Шаг 2. Установка CefSharp через NuGet

Выбираем правильный пакет для .NET 8

Действия:
1. Правой кнопкой по проекту → Управление пакетами NuGet.
2. Вкладка «Обзор».
3. Поиск: CefSharp.Wpf.NETCore.
4. Установить последнюю версию.
5. Дождаться окончания установки (пакет сам подтянет CefSharp.Common и cef.redist).

⚠️ Важно: для .NET 8 нужен именно пакет с суффиксом .NETCore. Обычный CefSharp.Wpf — для .NET Framework.

⚙️ Шаг 3. Настройка платформы (обязательно!)

CefSharp не работает в режиме AnyCPU

Сборка → Диспетчер конфигураций.
Активная платформа решения → Создать.
Новая платформа: x86 (или x64).
Копировать из AnyCPU → ОК.
Закрыть окно.
Пересобрать решение (Ctrl+Shift+B).
            

💡 Рекомендуем x86 — приложение будет работать и на 32‑битных, и на 64‑битных системах.

🖼️ Шаг 4. Подключаем CefSharp в XAML

Добавляем пространство имён cef

<Window x:Class="MyBrowser.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        Title="Мой браузер" Height="600" Width="900">
            

📌 После добавления этой строки в XAML появляется доступ к элементу <cef:ChromiumWebBrowser />.

🧱 Шаг 5. Рисуем окно браузера

DockPanel + панель инструментов + браузер

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="5">
        <Button x:Name="BackButton" Content="◀ Назад" Width="70"/>
        <Button x:Name="ForwardButton" Content="Вперед ▶" Width="70"/>
        <Button x:Name="RefreshButton" Content="🔄" Width="40"/>
        <TextBox x:Name="AddressBar" Width="400"/>
        <Button x:Name="GoButton" Content="Перейти" Width="70"/>
        <Button x:Name="DevToolsButton" Content="🔧 DevTools" Width="70"/>
    </StackPanel>
    <cef:ChromiumWebBrowser x:Name="Browser" />
</DockPanel>
            

💡 Button, TextBox и ChromiumWebBrowser — всё в одной разметке.

🚀 Шаг 6. Инициализация CefSharp (App.xaml.cs)

Один раз перед созданием браузера

using CefSharp;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        var settings = new CefSettings();
        settings.CachePath = System.IO.Path.Combine(
            Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
            "MyBrowserCache");
        Cef.Initialize(settings);
        base.OnStartup(e);
    }
}
            

⚠️ Без вызова Cef.Initialize() браузер не загрузит ни одной страницы.

⌨️ Шаг 7. Оживляем браузер (MainWindow.xaml.cs)

Обработчики навигации, кнопок, адресной строки

public MainWindow()
{
    InitializeComponent();
    Browser.Load("https://google.com");
    AddressBar.Text = "https://google.com";

    Browser.AddressChanged += (s, e) => 
        AddressBar.Text = e.NewValue?.ToString();
    Browser.TitleChanged += (s, e) => 
        this.Title = Browser.Title ?? "Мой браузер";

    BackButton.Click += (s, e) => { if (Browser.CanGoBack) Browser.Back(); };
    ForwardButton.Click += (s, e) => { if (Browser.CanGoForward) Browser.Forward(); };
    RefreshButton.Click += (s, e) => Browser.Reload();
    GoButton.Click += (s, e) => Browser.Load(AddressBar.Text);
    DevToolsButton.Click += (s, e) => Browser.ShowDevTools();

    AddressBar.KeyDown += (s, e) => 
        { if (e.Key == Key.Enter) Browser.Load(AddressBar.Text); };
}
            

💡 e.NewValue?.ToString() — получаем новый адрес из события AddressChanged.

▶️ Шаг 8. Запуск и первая проверка

Нажимаем F5 и смотрим

✅ Должно открыться окно.
✅ Должна загрузиться страница google.com.
✅ Кнопки «Назад/Вперёд» работают.
✅ При смене адреса строка обновляется.
✅ DevTools открывается по кнопке.

📌 Если браузер не грузит страницы — проверьте, что платформа x86/x64 и что Cef.Initialize() вызван.

⚠️ Частые ошибки и как их исправить

Собрали самые распространённые проблемы

❌ Не удается загрузить CefSharp.Core.dll
→ Платформа не x86/x64. Переключите через «Диспетчер конфигураций».

❌ Не найдено пространство имён cef
→ Установлен неправильный пакет. Для .NET 8 нужен CefSharp.Wpf.NETCore.

❌ Страница не грузится, пустой экран
→ Забыли Cef.Initialize() в App.xaml.cs.

❌ AddressChanged не обновляет строку
→ Используйте e.NewValue?.ToString() вместо e.Address.

📦 Шаг 9. Публикация (чтобы работало на других ПК)

CefSharp требует все файлы Chromium

Сборка → Опубликовать MyBrowser.
Выбрать папку.
Нажать «Опубликовать».
Скопировать ВСЮ папку на другой компьютер.
            

⚠️ Нельзя скопировать только .exe — нужны папки locales, swiftshader и файлы cef.pak.

💡 Размер опубликованной папки ≈ 80–120 МБ. Это нормально для Chromium.

✨ Что ещё можно добавить в браузер

Идеи для самостоятельного развития

🔍 Строка поиска (отличать URL от запроса)

📊 Индикатор загрузки (ProgressBar + LoadingStateChanged)

⭐ Панель закладок (сохранять сайты в ListBox)

📑 Вкладки (TabControl с несколькими браузерами)

📜 История посещений (сохранять адреса в список)

🧩 Выполнение JavaScript (EvaluateScriptAsync)

💡 Реализация вкладок — отличная практика для закрепления материала.

🏁 Итоги

Что мы освоили за эту лекцию

✅ Создавать проект WPF .NET 8

✅ Устанавливать CefSharp.Wpf.NETCore

✅ Настраивать платформу x86/x64

✅ Добавлять ChromiumWebBrowser в XAML

✅ Инициализировать CefSharp в App.xaml.cs

✅ Писать обработчики навигации

✅ Открывать DevTools

✅ Публиковать приложение с Chromium

🎉 Теперь вы можете создавать свои веб-обозреватели и встраивать современный браузер в любые WPF-приложения.

📚 Следующий шаг: изучите взаимодействие C# ↔ JavaScript через EvaluateScriptAsync и обработку событий из браузера.