Aplicativo de exemplo WinUI 2 (UWP)

  • Artigo

Este exemplo do WebView2 demonstra como usar o controle WebView2 e as APIs WebView2 para implementar um navegador da Web em um aplicativo WinUI 2 (UWP).

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

Pacotes NuGet instalados

Este exemplo inclui os seguintes pacotes NuGet:

  • Microsoft.NETCore.UniversalWindowsPlatform
  • O Microsoft.UI.Xaml – Pré-lançamento – inclui o SDK Microsoft.Web.WebView2 como uma dependência.

Para demonstrar os recursos mais recentes, este exemplo no repositório WebView2Samples é configurado para usar uma versão de pré-lançamento do SDK do WinUI 2 (listado como Microsoft.UI.Xaml no NuGet Package Manager), em vez de uma versão estável. O SDK do WinUI 2 inclui uma versão compatível do SDK do WebView2, como uma dependência do Microsoft.UI.Xaml.

Consulte também o arquivo README para webview2_sample_uwp.

Etapa 1 – Instalar o Visual Studio

O Microsoft Visual Studio é necessário. Não há suporte para o microsoft Visual Studio Code para este exemplo.

  1. Se o Visual Studio (versão mínima necessária) 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 nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Instalar um canal de visualização do Microsoft Edge

  1. Se um canal de visualização do Microsoft Edge (Beta, Dev ou Canary) ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar um canal de visualização do Microsoft Edge em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 3 – Clonar ou baixar o repositório WebView2Samples

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

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

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

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

    ou:

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

Etapa 5 – Instalar cargas de trabalho se solicitado

  1. Se solicitado, instale todas 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 nessa seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 6 – Criar e executar o projeto usando pacotes pré-instalados

Gerenciador de Soluções mostra o projeto webview2_sample_uwp:

O exemplo de webview2_sample_uwp aberto no Visual Studio em Gerenciador de Soluções

Crie e execute o projeto usando as versões dos pacotes NuGet instalados no exemplo do repositório:

  1. Na lista suspensa Configurações da Solução , selecione uma configuração, como Depurar.

  2. Na lista suspensa Plataformas de Solução , selecione uma plataforma, como x64.

    Definir o destino de build na parte superior do Visual Studio

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

    O projeto é criado.

  4. Selecione Depurar>Iniciar Depuração (F5).

    Uma janela de grade vazia aparece inicialmente por um momento:

    O projeto webview2_sample_uwp em execução, com grade vazia inicial

    Em seguida, a janela do aplicativo de exemplo exibe o conteúdo da página da Web:

    O projeto webview2_sample_uwp em execução, exibindo o conteúdo da página da Web

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

Em seguida, atualize os pacotes NuGet para o projeto, de acordo com as seções a seguir.

Etapa 7 – Atualizar os pacotes NuGet

Nesta etapa, atualizaremos os pacotes NuGet do projeto para obter a versão mais recente do SDK do WinUI 2. O SDK do WinUI 2 inclui uma versão de pré-lançamento ou versão compatível do SDK do WebView2.

Atualize os pacotes NuGet do projeto:

  1. No Visual Studio, em Gerenciador de Soluções, clique com o botão direito do mouse no projeto webview2_sample_uwp (não no nó da solução acima dele) e selecione Gerenciar Pacotes NuGet.

    O painel Gerenciador de Pacotes do NuGet é aberto no Visual Studio.

  2. No Gerenciador de Pacotes do NuGet, clique na guia Instalado .

  3. Selecione a caixa Incluir marcar de pré-lançamento.

    Uma versão pré-lançamento do pacote Microsoft.UI.Xaml está listada, indicando o SDK do WinUI 2. O pacote Microsoft.UI.Xaml inclui o SDK do WebView2; O Microsoft.Web.WebView2 está listado na seção Dependências do pacote Microsoft.UI.Xaml . A atualização do pacote Microsoft.UI.Xaml também causará uma atualização para o SDK do WebView2 compatível.

  4. No Gerenciador de Pacotes do NuGet, clique na guia Atualizações.

  5. Clique no cartão Microsoft.UI.Xaml à esquerda.

  6. Na caixa de texto Versão , verifique se o pré-lançamento mais recente está selecionado.

  7. Clique no botão Atualizar à direita:

    O gerenciador de pacotes Do NuGet para instalar o Microsoft.UI.Xaml

    Depois de obter os pacotes mais recentes, que podem levar alguns minutos, a caixa de diálogo Alterações de Visualização é aberta. Microsoft.Web.WebView2 (o SDK do WebView2) é listado separadamente na caixa de diálogo Alterações de Visualização :

    A caixa de diálogo 'Alterações de Visualização' para instalar o pacote Microsoft.UI.Xaml

  8. Clique no botão OK .

  9. A caixa de diálogo Aceitação de Licença é exibida:

    A caixa de diálogo 'Aceitação de Licença' para instalar o pacote Microsoft.UI.Xaml

  10. Clique no botão Aceito . No Visual Studio, o readme.txt arquivo é exibido, dizendo que você instalou o pacote WinUI:

    O arquivo readme.txt depois de instalar o pacote Microsoft.UI.Xaml, informa que você instalou o pacote WinUI NuGet

    O readme lista algumas linhas de código semelhantes ao que vamos adicionar.

  11. Atualize o pacote NuGet Microsoft.NETCore.UniversalWindowsPlatform usando etapas semelhantes.

    Depois de obter os pacotes UWP mais recentes, que podem levar alguns minutos, a caixa de diálogo Alterações de Visualização aparece:

    A caixa de diálogo 'Alterações de Visualização' para instalar o pacote UWP

  12. Selecione Salvar>Todos.

    Agora você instalou o pacote Microsoft.UI.Xaml, que é WinUI (WinUI 2), para seu projeto. Verifique os pacotes instalados resultantes da seguinte maneira:

  13. No Gerenciador de Pacotes do NuGet, clique na guia Instalado e inspecione os pacotes atualizados:

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml – Pré-lançamento

    Os pacotes instalados atualizados

  14. Feche a janela Gerenciador de Pacotes do NuGet .

Etapa 8 – Criar e executar o projeto com pacotes atualizados

Agora que os pacotes NuGet foram atualizados, crie e execute o projeto novamente:

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto webview2_sample_uwp e selecione Compilar.

    O projeto é criado.

  2. Selecione Depurar>Iniciar Depuração (F5).

    Uma janela de grade vazia aparece inicialmente por um momento:

    O projeto webview2_sample_uwp em execução, com grade vazia inicial

    Em seguida, a janela do aplicativo de exemplo exibe o conteúdo da página da Web:

    O projeto webview2_sample_uwp em execução, exibindo o conteúdo da página da Web

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

Etapa 9 – Inspecionar o código

  1. No editor de código do Visual Studio, inspecione o código:

    MainPage.xaml no Visual Studio

Confira também