Aplicação de exemplo WPF com extensão CDP
Este exemplo de WebView2 demonstra como utilizar a extensão CDP WebView2 para utilizar o Protocolo CDP (Chrome DevTools Protocol) numa aplicação WPF.
- Nome de exemplo: WV2CDPExtensionWPFSample
- Diretório de repositório: WV2CDPExtensionWPFSample
- Ficheiro de solução:
WV2CDPExtensionWPFSample.sln
Este exemplo, WV2CDPExtensionWPFSample, foi criado com a Extensão CDP WebView2 (o pacote NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension ). Este exemplo chama métodos do Protocolo Chrome DevTools num DevToolsProtocolHelper objeto no WebView2.
Este exemplo foi criado como um projeto do WPF Visual Studio 2019. Utiliza C# no ambiente WebView2.
O menu Comandos de DevTools :
O menu Eventos de DevTools :
Se esta for a primeira vez que utiliza o WebView2, recomendamos que siga primeiro o tutorial Introdução ao WebView2 em aplicações WPF . O tutorial orienta-o ao longo da criação de um WebView2 e da adição de algumas funcionalidades básicas do WebView2.
Passo 1 – Instalar o Visual Studio com suporte para .NET
É necessário o Microsoft Visual Studio (com suporte para .NET). O Microsoft Visual Studio Code não é suportado para este exemplo.
- Se o Visual Studio (versão mínima necessária) com suporte para .NET ainda não estiver instalado, numa janela ou separador separador, consulte Instalar o Visual Studio em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue os passos abaixo.
Passo 2 – Clonar ou transferir o repositório WebView2Samples
- Se ainda não tiver terminado, clone ou transfira o
WebView2Samplesrepositório para a unidade local. Numa janela ou separador separador, consulte Transferir o repositório WebView2Samples em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
Passo 3 – Abrir a solução no Visual Studio
Na unidade local, abra o
.slnficheiro no Visual Studio, no diretório :<your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln
ou:
<your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln
Se quiser utilizar o Visual Studio 2017, no Visual Studio, altere o Conjunto de Ferramentas de Plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto geral > de Ferramentas > de Plataforma. Para utilizar o Visual Studio 2017, também poderá ter de instalar uma SDK do Windows recente.
Passo 4 – Instalar cargas de trabalho, se lhe for pedido
Se lhe for pedido, instale quaisquer cargas de trabalho do Visual Studio pedidas. Numa janela ou separador separador, consulte Instalar cargas de trabalho do Visual Studio em Configurar o ambiente Dev para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
O projeto WV2CDPExtensionWPFSample é aberto no Visual Studio:
Passo 5 – Criar e executar o projeto com a versão instalada dos SDKs
Uma versão do SDK WebView2 e o WebView2 DevToolsProtocolExtension estão incluídos como pacotes NuGet neste projeto. Num passo posterior, irá atualizá-los com o Gestor de Pacotes NuGet do Visual Studio.
Na parte superior do Visual Studio, defina o destino da criação da seguinte forma:
Na lista pendente Configurações de Soluções , selecione Depurar ou Versão.
Na lista pendente Plataformas de Soluções , selecione Qualquer CPU.
No Gerenciador de Soluções, clique com o botão direito do rato no projeto WV2CDPExtensionWPFSample e, em seguida, selecione Compilar.
No Visual Studio, selecione Depurar>Iniciar Depuração (F5).
É aberta a janela da aplicação de exemplo:
No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha a aplicação.
Passo 6 – Atualizar o SDK WebView2
No Gerenciador de Soluções, clique com o botão direito do rato no projeto (não no nó da solução) e, em seguida, selecione Gerir Pacotes NuGet. O Gestor de Pacotes NuGet é aberto.
Clique no separador Instalado ou Atualizações.
Selecione ou desmarque a caixa de verificação Incluir pré-lançamento .
A captura de ecrã acima mostra o Visual Studio 2019, que mostra este exemplo no contexto da solução WebView2APIsSample abrangente, em vez da solução autónoma atual. Nesta captura de ecrã, o repositório tem uma versão de lançamento do SDK WebView2 e estão disponíveis versões de lançamento e pré-lançamento mais recentes do SDK.
Se estiver listada uma versão mais recente do SDK Microsoft.Web.WebView2 , clique no botão Atualizar . Uma pré-lançamento tem um sufixo "-pré-lançamento", como 1.0.1248-pré-lançamento. Os SDKs de pré-lançamento permitem-lhe experimentar as apIs e funcionalidades webView2 mais recentes.
Se quiser ver detalhes sobre este passo, numa janela ou separador separador, consulte Instalar ou atualizar o SDK WebView2 em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
Passo 7 – Atualizar a Extensão CDP webView2
Um pré-requisito para este exemplo é a versão de lançamento mais recente da Extensão CDP webView2 (Microsoft.Web.WebView2.DevToolsProtocolExtension), que está incluída neste projeto. Esse pacote adiciona suporte para a API CDP (Chrome DevTools Protocol).
No Gerenciador de Soluções, clique com o botão direito do rato no projeto e, em seguida, selecione Gerir Pacotes NuGet. O Gestor de Pacotes NuGet é aberto.
Clique no separador Instalado ou Atualizações.
Desmarque a caixa de verificação Incluir pré-lançamento .
Se estiver listada uma versão de lançamento mais recente do SDK Microsoft.Web.WebView2.DevToolsProtocolExtension , clique no botão Atualizar .
Veja também:
Passo 8 – Compilar e executar o projeto com pacotes atualizados
No Visual Studio, selecione Depurar>Iniciar Depuração (F5).
É aberta a janela da aplicação de exemplo:
No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha a aplicação.
Passo 9 – Inspecionar o código
No editor de código do Visual Studio, inspecione o código:
O menu Comandos de DevTools :
O menu Eventos de DevTools :