Criar seu primeiro aplicativo .NET MAUI para Windows

Ponha a mão na massa do .NET criando seu primeiro aplicativo multiplataforma no Windows.

Introdução

Neste tutorial, você aprenderá a criar e executar seu primeiro aplicativo .NET MAUI para Windows no Visual Studio 2022 (17.3 ou posterior). Adicionaremos alguns recursos do MVVM Toolkit do .NET Community Toolkit para melhorar 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 começar a usar o .NET MAUI no Windows.

Criando o projeto .NET MAUI

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 seu 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 que suas dependências sejam restauradas:

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 em mim várias vezes e observe que a contagem do número de cliques no botão é incrementada:

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 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 MVVM Toolkit

Agora que você tem seu primeiro aplicativo .NET MAUI em execução no Windows, vamos adicionar alguns recursos do MVVM Toolkit 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 NuGet depois que o novo pacote terminar de instalar.

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

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

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

8. A MainViewModel classe conterá o código a seguir. O CountChangedMessage registro define uma mensagem que é enviada sempre que o botão Clique em mim é clicado, notificando a exibição da alteração. Os atributos ObservableProperty e RelayCommand adicionados aos message membros e IncrementCounter são geradores de origem fornecidos pelo MVVM Toolkit para criar o código clichê do MVVM para INotifyPropertyChanged implementações e IRelayCommand . A IncrementCounter implementação do método contém a lógica de OnCounterClicked 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++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

Observação

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 OnCounterClicked método e o count campo.

10. Adicione o código a seguir ao MainPage construtor após a chamada para InitializeComponenent(). Este código receberá a mensagem enviada por IncrementCounter() no MainViewModel e atualizará a CounterBtn.Text propriedade 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 using instrução à classe:

using CommunityToolkit.Mvvm.Messaging;

12. Em MainPage.xaml, adicione uma declaração de namespace ao ContentPage para que a MainViewModel classe 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 on MainPage para usar um Command em vez de manipular o Clicked evento. O comando será vinculado à IncrementCounterCommand propriedade pública gerada pelos geradores de origem do MVVM Toolkit:

<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!" em MainPage.xaml. Salve o arquivo e observe que a Recarga Dinâmica XAML atualiza a interface do usuário enquanto o aplicativo ainda está em execução:

Próximas etapas

Aprenda a criar um aplicativo que exiba dados do Microsoft Graph para um usuário aproveitando o SDK do Graph em um tutorial do .NET MAUI para Windows.

Tópicos relacionados

Recursos para aprendizado do .NET MAUI

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