Criar seu primeiro aplicativo MAUI do .NET para Windows

Coloque as mãos na massa com o .NET MAUI criando seu primeiro aplicativo multiplataforma no Windows.

Introdução

Neste tutorial, você aprenderá a criar e executar seu primeiro aplicativo MAUI do .NET para Windows no Visual Studio 2022 (17.3 ou posterior). Adicionaremos alguns recursos do kit de ferramentas MVVM do .NET Community Toolkit para aperfeiçoar o design do projeto padrão.

Configurando o ambiente

Se você ainda não configurou seu ambiente para desenvolvimento do .NET MAUI, siga as etapas para Introdução ao MAUI do .NET no Windows.

Criando o projeto MAUI do .NET

1. Inicie o Visual Studio e, na janela inicial, clique em Criar um novo projeto para criar um novo projeto:

   

2. Na janela Criar um novo projeto, selecione MAUI na lista suspensa Todos os tipos de projeto, selecione o modelo de aplicativo .NET MAUI e clique no botão Avançar:

   

3. Na janela Configurar seu novo projeto, dê um nome ao projeto, escolha um local para ele e clique no botão Avançar:

   

4. Na janela Informações adicionais, clique no botão Criar:

   

5. Aguarde até que o projeto seja criado e suas dependências sejam restauradas.

   O projeto

6. Na barra de ferramentas do Visual Studio, pressione o botão Windows Machine para compilar e executar o aplicativo.

7. No aplicativo em execução, pressione o botão Clique aqui várias vezes e observe que a contagem de cliques no botão aumenta.

   

Você acabou de executar seu primeiro aplicativo .NET MAUI no Windows. Na próxima seção, você aprenderá a adicionar recursos de associação de dados e mensagens do do MVVM Toolkit ao seu aplicativo.

Solução de problemas

Se o aplicativo não for compilado, examine Solucionar problemas conhecidos, que pode ter uma solução para o problema.

Adicionando o Kit de Ferramentas MVVM

Agora que você tem seu primeiro aplicativo MAUI do .NET em execução no Windows, vamos adicionar alguns recursos do Kit de Ferramentas MVVM ao projeto para melhorar o design do aplicativo.

1. Clique com o botão direito do mouse no projeto no Gerenciador de Soluções e selecione Gerenciar Pacotes NuGet... no menu de contexto.

2. Na janela do Gerenciador de Pacotes NuGet, selecione a guia Procurar e procure por CommunityToolkitMVVM:

   

3. Adicione a versão estável mais recente do pacote CommunityToolkit.MVVM (versão 8.0.0 ou posterior) ao projeto clicando em Instalar.

4. Feche a janela do Gerenciador de Pacotes do NuGet após a instalação do novo pacote.

5. Clique com o botão direito do mouse no projeto novamente e selecione Adicionar | A classe no menu de contexto.

6. Na janela Adicionar Novo Item exibida, nomeie a classe MainViewModel e clique em Adicionar:

   

7. A classe MainViewModel será o destino de associação de dados para o MainPage. Atualize para que herde de ObservableObject no namespace CommunityToolkit.Mvvm.ComponentModel. Isso também exigirá a atualização da classe para public e partial.

8. A classe MainViewModel conterá o código a seguir. O registro CountChangedMessage define uma mensagem que é enviada sempre que o botão Clicar em mim é clicado, notificando a visualização da alteração. Os atributos ObservableProperty e RelayCommand adicionados aos membros message e IncrementCounter são geradores de código-fonte fornecidos pelo Kit de Ferramentas MVVM para criar o código boilerplate MVVM para implementações de INotifyPropertyChanged e IRelayCommand. A implementação do método IncrementCounter contém a lógica de OnCounterClicked em MainPage.xaml.cs, com uma alteração para enviar uma mensagem com a nova mensagem de contador. Removeremos esse código code-behind mais tarde.

   using CommunityToolkit.Mvvm.ComponentModel;
   using CommunityToolkit.Mvvm.Input;
   using CommunityToolkit.Mvvm.Messaging;
   
   namespace MauiOnWindows
   {
       public sealed record CountChangedMessage(string Text);
   
       public partial class MainViewModel : ObservableObject
       {
           [ObservableProperty]
           private string message = "Click me";
   
           private int count;
   
           [RelayCommand]
           private void IncrementCounter()
           {
               count++;
   
               // Pluralize the message if the count is greater than 1
               message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";
   
               WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
           }
       }
   }
   

   Nota

   Você precisará atualizar o namespace no código anterior para corresponder ao namespace em seu projeto.

9. Abra o arquivo MainPage.xaml.cs para edição e remova o método OnCounterClicked e o campo count.

10. Adicione o seguinte código ao construtor MainPage após a chamada para InitializeComponent(). Esse código receberá a mensagem enviada por IncrementCounter() no MainViewModel e atualizará a propriedade CounterBtn.Text com a nova mensagem e anunciará o novo texto com o SemanticScreenReader:

    WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
    {
        CounterBtn.Text = m.Text;
        SemanticScreenReader.Announce(m.Text);
    });
    

11. Você também precisará adicionar uma declaração using à classe.

    using CommunityToolkit.Mvvm.Messaging;
    

12. Em MainPage.xaml, adicione uma declaração de namespace à ContentPage para que a classe MainViewModel possa ser encontrada:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Adicione MainViewModel como o BindingContext para o ContentPage:

    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>
    

14. Atualize o Button em MainPage para usar um Command em vez de manipular o evento Clicked. O comando será associado à propriedade pública IncrementCounterCommand gerada pelos geradores de origem do Kit de Ferramentas MVVM:

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Command="{Binding Path=IncrementCounterCommand}"
        HorizontalOptions="Center" />
    

15. Execute o projeto novamente e observe que o contador ainda é incrementado quando você clica no botão:

    

16. Enquanto o projeto estiver em execução, tente atualizar a mensagem "Olá, Mundo!" no primeiro Rótulo para ler "Olá, Windows!" no MainPage.xaml. Salve o arquivo e observe que XAML Hot Reload atualiza a interface do usuário enquanto o aplicativo está em execução.

    

Próximas etapas

Saiba como criar um aplicativo que exibe dados do Microsoft Graph para um usuário utilizando o SDK do Graph em um tutorial de .NET MAUI para Windows.

Conteúdo relacionado

Recursos para aprendizado do .NET MAUI

Usando a API do Microsoft Graph com o .NET MAUI no Windows