.NET MAUI Tutorial | Seu primeiro aplicativo multiplataforma em C#

Introdução

Finalidade

Configure seu ambiente de desenvolvimento e crie seu primeiro aplicativo .NET Multi-Platform App UI (.NET MAUI).

Pré-requisitos

Verifique os requisitos do sistema para o Visual Studio 2022.

Tempo para conclusão

10 minutos + tempo de download/instalação

Situação

Um aplicativo móvel e desktop que funciona no Windows e Android que exibe uma mensagem Hello, World!.

Baixar e instalar

Baixe e instale o Visual Studio 2022.

Baixar o Visual Studio 2022

Durante a instalação, a carga de trabalho de desenvolvimento do .NET Multi-Platform App UI deve ser selecionada. O uso do link acima deve pré-selecionar todos os pré-requisitos corretamente, conforme mostrado na imagem a seguir:

Já tem o Visual Studio 2022?

Se você já tiver o Visual Studio 2022, certifique-se de que ele esteja atualizado e de que a carga de trabalho necessária esteja instalada:

Selecione a tecla Windows, digite Instalador do Visual Studio e pressione Enter.
Se solicitado, permita que o instalador se atualize.
Se uma atualização para o Visual Studio 2022 estiver disponível, um botão de Atualizar será exibido. Selecione-o para atualizar antes de modificar a instalação. Este tutorial só funciona com Visual Studio 2022 17.12 e versões posteriores.
Localize sua instalação do Visual Studio 2022 e selecione Modificar.
Selecione Desenvolvimento do .NET Multi-Platform App UI.
Selecione o botão Modificar.

Baixe e instale o SDK do .NET. Após a conclusão do download, inicie o download para iniciar a instalação.

Baixar o SDK do .NET 9 x64 (Intel)
Baixar o SDK do .NET 9 Arm64 (Apple Silicon)

Se você estiver em um Mac com um chip Apple M1 ou M2, precisará instalar a versão Arm64 do SDK.
Baixe e instale o VS Code:

Baixar o VS Code
Abra o VS Code e selecione o botão Extensões na Barra de Atividades do VS Code à esquerda. Digite MAUI na barra de pesquisa, selecione .NET MAUI e, em seguida, selecione o botão Instalar na página da extensão .NET MAUI.

Essa extensão vem com o Kit de Desenvolvimento do C# e as extensões C#, que são necessárias para a execução da extensão .NET MAUI.
Abra um novo terminal e instale a carga de trabalho .NET MAUI executando o seguinte comando:
Terminal
```
sudo dotnet workload install maui
```
Se a instalação for bem-sucedida, você deverá ver uma saída semelhante à seguinte:
Terminal
```
Successfully installed workload maui
```

Verifique se tudo foi instalado corretamente

Depois de configurar seu ambiente, abra um novo terminal do VS Code. Na barra de ferramentas, selecione Terminal e, em seguida, Novo Terminal.

No terminal, execute o comando a seguir para verificar sua instalação.

Terminal

dotnet workload list

Se a instalação for bem-sucedida, você deverá ver uma saída semelhante à seguinte:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

Encontrou um erro?

Se você receber um erro do tipo O 'dotnet' não é reconhecido como um comando interno ou externo, verifique se você abriu um novo terminal do VS Code. Se reiniciar o VS Code ou reiniciar seu computador não resolver o problema, use o botão Encontrei um problema na parte inferior da página para obter ajuda para corrigir o problema.

Instalar o Xcode

Para criar aplicativos .NET MAUI, você também precisará de:

Última versão do Xcode

Para localizar a versão mais recente do Xcode que é compatível com o .NET MAUI, verifique esta referência de versão de lançamento. Vá para a coluna Ferramentas da Apple para encontrar a versão mais recente compatível do Xcode.

Uma ID da Apple

Se você ainda não tiver uma ID da Apple, poderá criar uma nova em https://appleid.apple.com. Uma ID da Apple é necessária para instalar e entrar no Xcode.
Depois de instalar o Xcode, você deve abrir o Xcode e concordar com os contratos de licença e instalar componentes opcionais, se solicitado.
Quando perguntado para quais plataformas você gostaria de desenvolver, selecione as plataformas macOS e iOS e, em seguida, selecione Baixar e Instalar.
Abra um novo terminal e instale as ferramentas de desenvolvedor de linha de comando do Xcode executando o seguinte comando:
Terminal
```
xcode-select --install
```
Quando solicitado a instalar as ferramentas de desenvolvedor de linha de comando do Xcode, selecione Instalar. Por fim, concorde com o contrato de licença.

Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.

Criar seu aplicativo

Criar um novo aplicativo .NET MAUI:

Abra o Visual Studio 2022.
Selecione o botão Criar um novo projeto.
Na janela Criar um novo projeto, digite MAUI App na barra de pesquisa. Selecione o modelo .NET MAUI App e clique no botão Next.
Na janela Configurar seu novo projeto, insira MyFirstMauiApp como o nome do projeto e clique no botão Avançar.
Na janela Informações adicionais, selecione .NET 9.0 na lista suspensa Estrutura, se ainda não estiver selecionado, e clique no botão Criar.

Visual Studio cria o novo projeto. Se você receber um aviso de Alerta de Segurança do Windows sobre o firewall bloqueando alguns recursos, selecione o botão Permitir acesso.

Aguardar o processo de restauração de pacotes NuGet

O NuGet é um gerenciador de pacotes que trará as dependências de seu novo aplicativo.

O processo de restauração do pacote será iniciado automaticamente. Aguarde até a mensagem de Restaurada ou Pronta exibida na barra de status na parte inferior esquerda da tela.

Executar seu aplicativo

Este tutorial se concentrará na implantação de um aplicativo .NET MAUI em seu computador Windows local primeiro. Posteriormente, você terá a opção de configurar um dispositivo ou emulador Android.

Na barra de ferramentas do Visual Studio, você deve ver Windows Machine como o destino de depuração por padrão. Pressione o botão Windows Machine para compilar e executar o aplicativo:

No aplicativo em execução, selecione o botão Clique em mim algumas vezes e observe que a contagem do número de cliques no botão é incrementada:

Parabéns, você criou e executou seu primeiro aplicativo .NET MAUI! Mantenha o aplicativo em execução e continue o tutorial.

Editar seu código

Ao desenvolver aplicativos com .NET MAUI, Recarga Dinâmica de XAML está disponível quando você está depurando seu aplicativo. Isso significa que você pode alterar a interface do usuário XAML enquanto o aplicativo está em execução e a interface do usuário será atualizada automaticamente.

Volte para o Visual Studio e deixe o aplicativo em execução. No Solution Explorer, clique duas vezes no arquivo MainPage.xaml no projeto MyFirstMauiApp. Se você não vir o painel Gerenciador de Soluções, selecione Exibir > Solution Explorer no menu principal (ou pressione CTRL+ALT+L).

Atualmente, o Text da segunda Label na linha 17 está definido como Hello, World!, conforme mostrado no código a seguir:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Atualizar o texto para ler Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

A interface do usuário do aplicativo é atualizada automaticamente à medida que você faz alterações.

Ao desenvolver aplicativos com o .NET MAUI, você também pode usar o .NET Recarga Dinâmica para recarregar seu código C#. Vamos modificar a lógica no aplicativo para incrementar a contagem em 10 em vez de 1 quando você clicar no botão.

Abrir MainPage.xaml.cs (esse arquivo está aninhado em MainPage.xaml ou você pode clicar com o botão direito do mouse e selecionar Exibir Código no menu).

O método OnCounterClicked nesse arquivo atualmente tem o seguinte código:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Atualizar o count++; para incrementar em 10 alterando-o para count += 10;.

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Para aplicar suas alterações de código, salve o arquivo e selecione o botão Recarga Dinâmica no Visual Studio ou selecione ALT+F10.

Selecione o botão Clique em mim e veja-o aumentar em 10. Muito bem! Você pode fechar o aplicativo em execução agora.

Executar em um dispositivo móvel

Você pode decidir implantar em uma ou mais plataformas com base em seu ambiente de desenvolvimento. Você acabou de executar e implantar seu aplicativo no Windows. Agora, vamos configurar um dispositivo ou emulador Android.

Ativar Hyper-V

Na sua Barra do Windows Search, digite Recursos do Windows e selecione Ativar ou desativar recursos do Windows.

Verifique se a caixa Hypter-V está marcada e selecione Ok.

Você precisará reinicializar seu computador nesse momento para que a alteração entre em vigor.

Instalação do SDK do Android

Abra o Visual Studio e sua solução MyFirstMauiApp. No menu suspenso de destino de depuração, selecione net8.0-android no Framework.

Versões específicas do SDK do Android são necessárias para compilar projetos. Se você não aceitou a licença SDK do Android, verá a seguinte mensagem de erro na janela Lista de Erros.

Clique duas vezes na mensagem para iniciar o processo de aceitação da licença. Clique em Aceitar para cada uma das licenças presentes e a instalação automática será iniciada.

Configurar o emulador do Android

Se você não tiver um dispositivo Android para implantar, siga estas etapas para configurar um emulador do Android. Se você já fez isso ou deseja usar seu próprio dispositivo Android, pode pular esta etapa.

Se esta for a primeira vez que você cria um .NET MAUI aplicativo, você verá Android Emulator selecionado no menu suspenso de destino de depuração. Clique nele para iniciar o processo de criação. Se uma caixa de diálogo de aceitação de licença aparecer, selecione Aceitar.

Isso abre a janela Novo dispositivo. Selecione o botão Criar para criar um emulador com as configurações padrão. Isso baixará as imagens do emulador e finalizará a criação do emulador para uso no Visual Studio. Esta etapa pode demorar um pouco.

Não se preocupe se o Nível da API que você vê for diferente das imagens. Deve ser 33 ou superior.

Após a criação do emulador, você verá um botão que indica Iniciar. Clique nele.

Você pode receber uma solicitação para habilitar a plataforma de hipervisor do Windows. Siga a documentação para habilitar a aceleração para melhorar o desempenho (necessário para colocar o emulador em funcionamento). Selecione Executar Mesmo Assim.

O emulador do Android será iniciado e será totalmente concluído quando você vir a capacidade de Stop no Gerenciador de Dispositivos Android. Isso pode levar algum tempo.

Quando estiver totalmente concluído, você o verá exibido no menu de depuração do Visual Studio.

Seu Android Emulator foi agora criado e está pronto para ser usado. Da próxima vez que você executar o Visual Studio, o emulador aparecerá diretamente na janela de destino de depuração e será iniciado quando você selecioná-lo. Se você tiver qualquer problema ou tiver problemas de desempenho com o emulador, leia a documentação de instalação completa.

Configurar dispositivo Android

Para desenvolver com seu dispositivo Android, a depuração USB precisa ser habilitada. Siga estas etapas no dispositivo para conectá-lo ao Visual Studio. Se você não tiver um dispositivo Android, poderá ignorar esta seção.

Habilitar o modo de desenvolvedor

Vá para a tela Configurações.
Localize número de build usando Pesquisar na parte superior da tela de configurações ou localize-o em Sobre telefone.
Toque em Número da compilação 7-10 vezes até aparecer "Agora você é um desenvolvedor!".

Verificar o status de depuração de USB

Vá para a tela Configurações.
Localize depuração de USB usando o Pesquisar na parte superior da tela de configurações ou nas Opções do desenvolvedor.
Habilitar Depuração de USB se ainda não estiver habilitada.

Dispositivo de confiança

Conecte seu dispositivo ao computador.
Você será solicitado a Permitir depuração USB.
Marque a caixa Sempre permitir deste computador.
Clique em Permitir.

Seu dispositivo está configurado agora e será exibido no Visual Studio como um destino de implantação.

Está tendo problemas? Verifique a documentação.

Seu emulador ou dispositivo agora deve ser configurado para implantação!

Executar no Android

Verifique se o dispositivo ou o emulador está selecionado como um destino de depuração.

No menu, selecione Depurar > Iniciar Depuração (ou pressione F5). Se essa opção estiver desabilitada, verifique se um emulador ou dispositivo está selecionado.

Seu aplicativo será compilado, implantado no dispositivo/emulador Android selecionado e executado.