Introdução ao WebView2 em aplicativos WinUI 2 (UWP)

Este artigo é para aprender a escrever seu próprio código WebView2. Se você quiser executar um exemplo primeiro, consulte o aplicativo de exemplo Win32 ou outro artigo de aplicativo de exemplo, como o aplicativo de exemplo WinUI 2 (UWP).

Neste tutorial, você:

• Configure suas ferramentas de desenvolvimento para criar aplicativos UWP que usam o WebView2 para exibir conteúdo da Web.
• Crie um aplicativo WinUI 2 (UWP) inicial.
• Instale o pacote Microsoft.UI.Xaml (WinUI 2) para o projeto.
• Adicione um controle WebView2 que exiba o conteúdo da página da Web.
• Aprenda sobre os conceitos do WebView2 ao longo do caminho.

Use o modelo de projeto do Aplicativo em Branco do C# (Universal do Windows) e, em seguida, instale o pacote Microsoft.UI.Xaml (WinUI 2) para este projeto. A instalação desse pacote instala o pacote Microsoft.Web.WebView2 (o SDK do WebView2) como uma dependência.

O pacote Microsoft.UI.Xaml (WinUI 2) faz parte da Biblioteca de Interface do Usuário do Windows. Este pacote fornece recursos de interface do usuário do Windows, incluindo:

• Controles XAML UWP.
• Estilos de controle densos.
• Estilos e materiais fluentes.

Plataformas

Este artigo se aplica ao Windows e ao XBOX.

O WinUI 2 dá suporte apenas a UWP. Esses controles são compatíveis com versões anteriores.

Veja também:

• Exemplos de aplicativos de mídia para XBOX

Projeto concluído

Uma versão concluída deste projeto de Introdução (solução) está no repositório WebView2Samples. Você pode usar a solução concluída (do repositório ou executando as etapas abaixo) como uma linha de base para adicionar mais código WebView2 e outros recursos.

Uma versão completa deste projeto de tutorial está disponível no repositório WebView2Samples :

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

Siga as principais seções da Etapa na sequência, abaixo.

Sobre WinUI e WebView2

Em aplicativos WinUI 2 (UWP), o WebView2 é exposto como um controle XAML. Depois de inserir o controle XAML em seu aplicativo como um controle nomeado, você poderá se referir a esse controle XAML em arquivos C#.

Apenas um subconjunto de interfaces/funções do WebView2 são expostos no WinUI:

• O WebView2 objeto XAML expõe a CoreWebView2 interface, juntamente com a funcionalidade mais importante.

• Interfaces como as que CoreWebView2Controller estão ocultas, pois o WinUI cuida do ambiente e da criação de janelas nos bastidores.

Veja também:

• Limitação XAML no WebView2 em aplicativos WinUI 2 (UWP).

Etapa 1 – Instalar o Visual Studio

Este artigo mostra etapas e capturas de tela para o Visual Studio 2022 Community Edition. O Microsoft Visual Studio 2019 versão 16.9 ou posterior é necessário. Não há suporte para o Visual Studio 2017.

1. Se uma versão adequada do Microsoft Visual Studio ainda não estiver instalada, em uma nova janela ou guia, confira Instalar o Visual Studio em Configurar seu ambiente de Desenvolvimento para WebView2. Siga as etapas nesta página para fazer uma instalação padrão básica do Visual Studio, como o Visual Studio 2022 Community Edition.

   Em seguida, retorne a esta página e continue abaixo.

2. Se o Visual Studio não mostrar números de linha no editor de código, talvez você queira ativar os números de linha. Para fazer isso, selecione Ferramentas>Opções>Editor>de Texto Todos os Idiomas Números>de linha. Clique em OK.

Etapa 2 - Instalar cargas de trabalho para a área de trabalho do .NET, a área de trabalho C++ e as ferramentas de desenvolvimento UWP

1. Abra o Microsoft Visual Studio. A janela de opções de abertura é exibida:

   

2. No canto inferior direito, clique em Continuar sem código. O Visual Studio é aberto, vazio:

   

3. Selecione Ferramentas>Obter Ferramentas e Recursos. A janela do Visual Studio Installer é aberta e, em seguida, a janela Modificando - Visual Studio é aberta sobre ela:

   

Se a janela Modificando o Visual Studio não estiver aberta, na janela do Visual Studio Installer, clique no botão Modificar.

1. Na guia Cargas de trabalho , role e clique nos seguintes cartões para selecioná-los; Verifique se uma marca de seleção está em cada um destes cartões:

   • Desenvolvimento para área de trabalho .NET
   • Desenvolvimento para área de trabalho com C++
   • Plataforma Universal do Windows

2. À direita, na seção Detalhes da instalação, expanda o desenvolvimento da Plataforma Universal do Windows e selecione as ferramentas da Plataforma Universal do Windows C++ (v143):

   

   Se todos esses componentes já tiverem sido instalados, clique no botão Fechar, feche a janela do Visual Studio Installer e pule para a próxima seção principal das etapas abaixo.

3. Clique no botão Modificar .

   Uma janela de Controle de Conta de Usuário é exibida, perguntando "Deseja permitir que este aplicativo faça alterações no seu dispositivo? Visual Studio Installer. Editor verificado: Microsoft Corporation. Origem do arquivo: disco rígido neste computador. Mostrar mais detalhes (botão)".

4. Clique no botão Sim .

5. Uma caixa de diálogo é exibida, "Antes de começarmos, feche o Visual Studio":

   

6. Clique no botão Continuar .

   O Visual Studio baixa, verifica e instala os pacotes selecionados:

   

   Esta captura de tela mostra o Visual Studio Professional 2022, embora este artigo tenha sido realmente atualizado usando o Visual Studio Community 2022.

   A instalação pode levar vários minutos. O Visual Studio é exibido, com um Gerenciador de Soluções vazio.

7. Pressione Alt+Tab para alternar para a janela do Visual Studio Installer e feche a janela do Visual Studio Installer.

Etapa 3 - Criar um aplicativo UWP

1. Se o Visual Studio estiver aberto, selecione Arquivo>Novo>Projeto. A caixa de diálogo Criar um novo projeto é aberta.

   Ou, se o Visual Studio estiver fechado, abra-o e, na tela de inicialização do Visual Studio, clique no card Criar um novo projeto:

   

2. Na caixa de texto Pesquisar modelos na parte superior, insira Aplicativo em Branco em C# (Universal do Windows) e selecione o card Aplicativo em Branco em C# (Universal do Windows):

   

3. Clique no botão Avançar .

   A caixa de diálogo Configurar seu novo projeto é exibida para um Aplicativo em Branco (Universal do Windows):

   

4. Na caixa de texto Nome do projeto , digite um nome de projeto, como MyUWPGetStartApp.

5. Na caixa de texto Local , insira um caminho, como C:\Users\myusername\Documents\MyWebView2Projects.

6. Clique no botão Criar .

   A caixa de diálogo Novo Projeto do Windows é exibida:

   

7. Aceite os padrões e clique no botão OK .

8. Se a seção da janela Modo de desenvolvedor for exibida, nessa seção, clique em Ativar. Se você ainda não tiver definido seu computador para o Modo de Desenvolvedor, a caixa de diálogo Usar recursos de desenvolvedor será aberta, para confirmar a ativação do modo de desenvolvedor.

   • Clique em Sim para ativar o Modo de Desenvolvedor para seu computador e feche a janela Configurações .

   O Visual Studio exibe a solução e o projeto recém-criados:

   

Etapa 4 - Compilar e executar o projeto vazio

Antes de adicionar o código WebView2, confirme se o projeto funciona e veja como é a aparência do aplicativo vazio, da seguinte maneira:

1. Compile e execute o projeto vazio. Para fazer isso, selecione Depurar>Iniciar Depuração (F5). A janela do aplicativo é aberta, exibe temporariamente uma grade e exibe o conteúdo do aplicativo:

   

   Este é um aplicativo WinUI 2 (UWP) de linha de base, ainda sem o WebView2.

2. Feche o aplicativo.

Em seguida, você configura esse novo projeto WinUI 2 (UWP) para hospedar o controle WebView2 e usar a API WebView2.

Etapa 5 – Instalar o SDK do WinUI 2 (Microsoft.UI.Xaml)

Em seguida, você instala o pacote Microsoft.UI.Xaml para este projeto. Microsoft.UI.Xaml é WinUI 2.

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

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

2. No Gerenciador de Pacotes NuGet, clique na guia Procurar .

3. Desmarque a caixa de marca Incluir pré-lançamento.

4. Na caixa Pesquisar, digite Microsoft.UI.Xaml e selecione o card Microsoft.UI.Xaml abaixo da caixa de pesquisa:

   

   Para a versão 2.8.0 ou posterior, na seção Dependências na parte inferior, Microsoft.Web.WebView2 está listado.

   Para o desenvolvimento do HoloLens 2, o pacote Microsoft.Web.WebView2 deve ser a versão 1.0.1722.45 ou superior, o que pode ser superior ao padrão. O WebView2 no HoloLens 2 está em versão prévia e sujeito a alterações antes da disponibilidade geral. O WebView2 só é suportado em dispositivos HoloLens 2 que executam a atualização do Windows 11. Para obter mais informações, consulte Atualizar o HoloLens 2.

5. No painel do meio, na lista suspensa Versão , certifique-se de que a versão mais recente estável esteja selecionada, versão 2.8.0 ou posterior.

6. Clique no botão Instalar .

   A caixa de diálogo Visualizar Alterações é exibida:

   

7. Clique no botão OK .

8. A caixa de diálogo Aceitação de licença é exibida:

   

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

   

   O Leiame lista algumas linhas de código que são semelhantes ao que adicionaremos.

10. Selecione Arquivo>, Salvar Tudo (Ctrl+Shift+S).

Agora você instalou o pacote Microsoft.UI.Xaml, que é o WinUI 2, para seu projeto. O SDK do WinUI 2 (Microsoft.UI.Xaml) inclui o SDK do WebView2, portanto, você não precisa instalar separadamente o pacote NuGet para o SDK do WebView2.

Etapa 6 - Instanciar o controle WebView2 no código XAML

Agora você está pronto para adicionar o código WebView2 ao projeto. Primeiro, adicione uma referência de namespace para o controle WebView2, da seguinte maneira:

1. No Gerenciador de Soluções, expanda seu projeto e clique duas vezes em MainPage.xaml.

   MainPage.xaml é aberto em um designer com um editor de código abaixo dele:

   

2. No editor de código, dentro <Page> da tag <Pagestart do elemento, adicione o seguinte atributo, abaixo dos outros xmlns: atributos:

   xmlns:controls="using:Microsoft.UI.Xaml.Controls"
   

   Adicione um controle WebView2 à grade XAML, da seguinte maneira:

3. MainPage.xaml No arquivo, no <Grid> elemento (que ainda não contém outros elementos), adicione um controle WebView2, adicionando o seguinte elemento:

   <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>
   

4. Pressione Ctrl+S para salvar o arquivo.

   Acima do MainPage.xaml arquivo no editor de códigos, uma visualização do conteúdo do controle WebView2 pode ser exibida ou pode permanecer em branco (branco) até que você compile o aplicativo pela primeira vez:

   

   O sublinhado ondulado desaparece após a criação e execução do aplicativo, na próxima etapa.

Etapa 7 - Compilar e executar o projeto que contém o controle WebView2

1. Clique em Depurar>Iniciar Depuração (F5). (Se estiver criando para o HoloLens 2, consulte Usando o Visual Studio para implantar e depurar). A janela do aplicativo é aberta, mostrando brevemente a grade do WinUI do WebView2:

   

2. Após alguns instantes, a janela do aplicativo mostra o site do Bing no controle WebView2 para WinUI 2:

   

3. No Visual Studio, selecione Depurar>Parar Depuração para fechar a janela do aplicativo.

Parabéns, você criou seu primeiro aplicativo WebView2!

Agora você pode alterar o conteúdo do controle WebView2 para adicionar seu próprio conteúdo.

Saiba mais sobre eventos de navegação

Em seguida, aprenda sobre eventos de navegação, que são essenciais para aplicativos WebView2. Inicialmente, o aplicativo navega para https://bing.com.

• Em uma nova janela ou guia, leia Eventos de navegação para aplicativos WebView2 e retorne a esta página.

Confira também

• WebView2 em aplicativos WinUI 2 (UWP)
• Referência da API WebView2
• Práticas recomendadas de desenvolvimento para aplicativos WebView2
  • Gerenciar pastas de dados do usuário
• Aplicativos de exemplo WebView2 : um guia para o WebView2Samples repositório.
  • Aplicativo de exemplo do WinUI 2 (UWP): etapas para baixar, atualizar, compilar e executar o exemplo do WinUI 2 WebView2.
• Projeto concluído do tutorial de Introdução: ao contrário de alguns dos outros tutoriais, não há uma versão concluída deste tutorial de Introdução no repositório WebView2Samples.

GitHub:

• Repositório WebView2Samples
• Aplicativo de exemplo UWP do WebView2 – o exemplo do WinUI 2 (UWP) WebView2.
• Problemas - repositório microsoft-ui-xaml - para inserir bugs ou solicitações de recursos específicos do WinUI.
• Exemplos de aplicativos de mídia para XBOX

NuGet:

• Microsoft.UI.Xaml Pacote NuGet