Aplicativo de exemplo WPF

Este exemplo, WebView2WpfBrowser, é um aplicativo WPF .NET que demonstra como inserir o controle WebView2 e usar APIs WebView2 para implementar um navegador da Web.

  • Nome da amostra: WebView2WpfBrowser
  • Diretório do repositório: WebView2WpfBrowser
  • Arquivo da solução: WebView2WpfBrowser.sln

Este exemplo foi criado como um projeto do WPF Visual Studio 2019. Ele usa C# e HTML/CSS/JavaScript no ambiente WebView2.

Este exemplo mostra uma seleção de manipuladores de eventos e métodos de API do WebView2 que permitem que um aplicativo WPF interaja diretamente com um WebView e vice-versa.

Aplicativo de exemplo WebView2WpfBrowser

O aplicativo de exemplo WebView2WpfBrowser tem os seguintes menus, contendo muitos itens de menu úteis:

  • Arquivo
  • View
  • Configurações
  • Cenário

Se esta for a primeira vez que você usa o WebView2, recomendamos primeiro seguir o tutorial de Introdução, que aborda como criar um WebView2 e explica algumas funcionalidades básicas do WebView2. Consulte Introdução ao WebView2 em aplicativos WPF.

Para obter mais informações sobre eventos e manipuladores de API no WebView2, consulte Referência da API do WebView2.

Etapa 1 - Instale o Visual Studio 2019 com suporte do .NET

O Microsoft Visual Studio é necessário. O Microsoft Visual Studio Code não tem suporte para este exemplo.

  1. Se o Visual Studio 2019 (versão mínima necessária) com suporte ao .NET ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar o Visual Studio em Configurar seu ambiente de Desenvolvimento para WebView2. Siga as etapas nesta seção para instalar o Visual Studio 2019 com suporte do .NET e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Clonar ou baixar o repositório WebView2Samples

  1. Se ainda não tiver feito isso, clone ou baixe o WebView2Samples repositório para sua unidade local. Em uma janela ou guia separada, consulte Baixar o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nesta seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 3 – Abrir a solução no Visual Studio

  1. Na unidade local, abra o .sln arquivo no Visual Studio, no diretório:

    • <your-repos-directory>/WebView2Samples/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

    ou:

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

Etapa 4 - Instalar cargas de trabalho, se solicitado

  1. Se solicitado, instale as cargas de trabalho do Visual Studio solicitadas. Em uma janela ou guia separada, consulte Instalar cargas de trabalho do Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nesta seção e, em seguida, retorne a esta página e continue abaixo.

    O projeto WebView2WpfBrowser é aberto no Visual Studio:

    O projeto WebView2WpfBrowser no Visual Studio

Etapa 5 - Compilar e executar o projeto

Na parte superior do Visual Studio, defina o destino da compilação, da seguinte maneira:

  1. Na lista suspensa Configurações da solução , selecione Depurar ou Liberar.

  2. Na lista suspensa Plataformas de Solução, selecione Qualquer CPU.

  3. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2WpfBrowser e selecione Compilar.

    Isso cria o arquivo WebView2WpfBrowser.csprojde projeto .

  4. No Visual Studio, selecione DepurarIniciar Depuração> (F5).

    A janela do aplicativo de exemplo é aberta:

    O aplicativo de exemplo WebView2WpfBrowser

  5. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Etapa 6 - Atualizar o SDK do WebView2

  1. Atualize o SDK do WebView2 de pré-lançamento no nó do projeto (não no nó da solução) no Gerenciador de Soluções. Instale o pré-lançamento mais recente do SDK do WebView2, para que você possa experimentar os recursos mais recentes. Em uma janela ou guia separada, consulte Instalar ou atualizar o SDK do WebView2 em Configurar seu ambiente de desenvolvimento para o WebView2. Siga as etapas nesta seção e, em seguida, retorne a esta página e continue abaixo.

  2. Compile e execute o projeto novamente.

Etapa 7 – Explorar os menus e inspecionar o código

  1. Explore os menus do aplicativo de exemplo WebView2WpfBrowser , contendo muitos itens de menu úteis:

    • Arquivo
    • View
    • Configurações
    • Cenário
  2. No editor de código do Visual Studio, inspecione o código:

    Código do projeto WebView2WpfBrowser no Visual Studio

Confira também