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

Introdução

Finalidade

Configure seu ambiente de desenvolvimento e crie seu primeiro aplicativo de interface do usuário de aplicativo multiplataforma (.NET MAUI) do .NET.

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 de interface do usuário de aplicativo de várias plataformas .NET 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á possui o Visual Studio 2022, pode atualizar sua instalação para adicionar suporte a .NET MAUI:

Selecione a tecla Windows, digite Instalador do Visual Studio e pressione Enter.
Se solicitado, permita que o instalador se atualize.
Se uma atualização do Visual Studio 2022 estiver disponível, um botão Atualizar será mostrado. Selecione-o para atualizar antes de modificar a instalação.
Localize sua instalação do Visual Studio 2022 e selecione Modificar.
Selecione Desenvolvimento de interface do usuário de aplicativo de várias plataformas do .NET.
Selecione o botão Modificar.

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 selecione MAUI na lista suspensa Todos os tipos de projeto selecione o modelo Aplicativo .NET MAUI e, em seguida, clique no botão Avançar.
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 7.0 (Standard Term Support) no menu suspenso 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:

Se você ainda não habilitou o modo de desenvolvedor, o Visual Studio solicitará que você o habilite. Na caixa de diálogo Ativar modo de Desenvolvedor para Windows, clique no link configurações para desenvolvedores para abrir o aplicativo Configurações:

Ative a alternância em Modo de Desenvolvedor.

A caixa de diálogo Usar recursos de desenvolvedor é exibida. Selecione Sim para confirmar que você deseja habilitar o modo de desenvolvedor.

Feche o aplicativo Configurações e, em seguida, feche a caixa de diálogo Ativar modo de Desenvolvedor para Windows. O aplicativo deve começar a ser executado.

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 do primeiro Label está definido para dizer Hello, World! conforme mostrado no código a seguir:

MainPage.xaml

<Label
    Text="Hello, World!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

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

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

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 as alterações de código, 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.

Configurar dispositivo Android

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.

Instalação do SDK do Android

No menu suspenso do destino de depuração, selecione net7.0-android em Estrutura.

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.

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).

O emulador do Android será iniciado. Aguarde a conclusão completa da inicialização e você o verá exibido no menu de depuração do Visual Studio. Isso pode levar algum tempo.

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.

Próximas etapas

Parabéns, você criou e executou seu primeiro aplicativo .NET MAUI!

Continuar aprendendo

Agora que você tem as noções básicas, continue aprendendo a criar aplicativos .NET MAUI com o roteiro de aprendizagem autoguiado no Microsoft Learn.

Roteiro de Aprendizagem do .NET MAUI

.NET MAUI para Iniciantes

Permita que James o oriente na criação de um aplicativo .NET MAUI completo do início ao fim:

Você também pode estar interessado em...

Documentos do desenvolvedor

Aprofunde-se na documentação para .NET MAUI

Exemplos de .NET MAUI

Explorar os exemplos de .NET MAUI no GitHub

Tutorial .NET MAUI – Crie seu primeiro aplicativo multiplataforma em C#

Introdução

Finalidade

Pré-requisitos

Tempo para conclusão

Situação

Baixar e instalar

Já tem o Visual Studio 2022?

Verifique se há atualizações do Visual Studio

Instalar o Xcode

Criar seu aplicativo

Aguardar o processo de restauração de pacotes NuGet

Executar seu aplicativo

Editar seu código

Configurar dispositivo Android

Instalação do SDK do Android

Configurar o emulador do Android

Configurar dispositivo Android

Executar no Android

Próximas etapas

Continuar aprendendo

.NET MAUI para Iniciantes

Documentos do desenvolvedor

Exemplos de .NET MAUI

Relatar um problema

Fornecer comentários