Пример приложения WPF с расширением CDP
В этом примере WebView2 показано, как использовать расширение CDP WebView2 для использования протокола Chrome DevTools (CDP) в приложении WPF.
- Пример имени: WV2CDPExtensionWPFSample
- Каталог репозитория: WV2CDPExtensionWPFSample
- Файл решения:
WV2CDPExtensionWPFSample.sln
В этом примере WV2CDPExtensionWPFSample используется расширение CDP WebView2 (пакет NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension ). Этот пример вызывает методы протокола Chrome DevTools для DevToolsProtocolHelper объекта в WebView2.
Этот пример создан как проект WPF Visual Studio 2019. Он использует C# в среде WebView2.
Меню Команды средства разработки :
Меню DevTools Events (События средств разработки ):
Если вы впервые используете WebView2, рекомендуется сначала ознакомиться с руководством Начало работы с WebView2 в приложениях WPF . В этом руководстве описано, как создать WebView2 и добавить некоторые базовые функции WebView2.
Шаг 1. Установка Visual Studio с поддержкой .NET
Требуется Microsoft Visual Studio (с поддержкой .NET). Microsoft Visual Studio Code не поддерживается в этом примере.
- Если Visual Studio (минимальная требуемая версия) с поддержкой .NET еще не установлена, в отдельном окне или на вкладке см. статью Установка Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и выполните указанные ниже действия.
Шаг 2. Клонирование или скачивание репозитория WebView2Samples
- Если это еще не сделано, клонируйте или скачайте репозиторий
WebView2Samplesна локальный диск. В отдельном окне или на вкладке см . раздел Скачивание репозитория WebView2Samplesстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.
Шаг 3. Открытие решения в Visual Studio
На локальном
.slnдиске откройте файл в Visual Studio в каталоге :<your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln
или
<your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln
Если вы хотите использовать Visual Studio 2017, в Visual Studio измените набор инструментов платформы проекта в разделе Свойства > проекта Свойства проекта. Свойства конфигурации общие >> набор инструментов платформы. Чтобы использовать Visual Studio 2017, также может потребоваться установить последнюю Windows SDK.
Шаг 4. Установка рабочих нагрузок при появлении запроса
При появлении запроса установите все запрошенные рабочие нагрузки Visual Studio. В отдельном окне или вкладке см . статью Установка рабочих нагрузок Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.
В Visual Studio откроется проект WV2CDPExtensionWPFSample :
Шаг 5. Сборка и запуск проекта с установленной версией пакетов SDK
Версия пакета SDK для WebView2 и WebView2 DevToolsProtocolExtension включены в этот проект в качестве пакетов NuGet. На следующем шаге вы обновите их с помощью диспетчера пакетов NuGet в Visual Studio.
В верхней части Visual Studio задайте целевой объект сборки следующим образом:
В раскрывающемся списке Конфигурации решений выберите Отладка или Выпуск.
В раскрывающемся списке Платформы решений выберите Любой ЦП.
В Обозреватель решений щелкните правой кнопкой мыши проект WV2CDPExtensionWPFSample и выберите Сборка.
В Visual Studio выберите Отладка>Начать отладку (F5).
Откроется окно примера приложения:
В Visual Studio выберите Отладка>Остановить отладку. Visual Studio закрывает приложение.
Шаг 6. Обновление пакета SDK для WebView2
В Обозреватель решений щелкните правой кнопкой мыши проект (не узел решения) и выберите Управление пакетами NuGet. Откроется диспетчер пакетов NuGet.
Перейдите на вкладку Установленные или Обновления.
Установите или снимите флажок Включить предварительную версию .
На приведенном выше снимке экрана показан Visual Studio 2019, показывающий этот пример в контексте всеобъемлющего решения WebView2APIsSample , а не нынешнего автономного решения. На этом снимке экрана репозиторий содержит версию пакета SDK для WebView2, а также доступны более новые и предварительные версии пакета SDK.
Если указан более новый выпуск пакета SDK для Microsoft.Web.WebView2 , нажмите кнопку Обновить . Предварительная версия имеет суффикс "-prerelease", например 1.0.1248-prerelease. Пакеты SDK для предварительной версии позволяют опробовать последние функции и API WebView2.
Если вы хотите просмотреть подробные сведения об этом шаге, в отдельном окне или на вкладке см. статью Установка или обновление пакета SDK для WebView2статьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.
Шаг 7. Обновление расширения CDP WebView2
Предварительным условием для этого примера является последняя версия расширения CDP WebView2 (Microsoft.Web.WebView2.DevToolsProtocolExtension), которое входит в этот проект. Этот пакет добавляет поддержку API chrome DevTools Protocol (CDP).
В Обозреватель решений щелкните проект правой кнопкой мыши и выберите Управление пакетами NuGet. Откроется диспетчер пакетов NuGet.
Перейдите на вкладку Установленные или Обновления.
Снимите флажок Включить предварительную версию .
Если указана более новая версия пакета SDK microsoft.Web.WebView2.DevToolsProtocolExtension , нажмите кнопку Обновить .
См. также:
Шаг 8. Сборка и запуск проекта с обновленными пакетами
В Visual Studio выберите Отладка>Начать отладку (F5).
Откроется окно примера приложения:
В Visual Studio выберите Отладка>Остановить отладку. Visual Studio закрывает приложение.
Шаг 9. Проверка кода
В редакторе кода Visual Studio проверьте код:
Меню Команды средства разработки :
Меню DevTools Events (События средств разработки ):