Crie seu primeiro aplicativo .NET MAUI para Windows

Comece a usar o .NET MAUI 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 Kit de Ferramentas MVVM do Kit de Ferramentas da Comunidade do .NET 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 Introdução ao MAUI do .NET 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 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 para que suas dependências sejam restauradas:

6. Na barra de ferramentas do Visual Studio, pressione o botão Computador Windows 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 de 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 Kit de Ferramentas MVVM ao seu aplicativo.

Solução de problemas

Se o aplicativo não for compilado, examine Solução de problemas conhecidos, que podem ter uma solução para o problema.

Adicionando o Kit de Ferramentas MVVM

Agora que você tem seu primeiro aplicativo .NET MAUI 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 Gerenciador de Pacotes NuGet , selecione a guia Procurar e pesquise CommunityToolkit.MVVM:

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 Gerenciador de Pacotes NuGet após a instalação do novo pacote.

5. Clique com o botão direito do mouse no projeto novamente e selecione Adicionar | Classe no 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 associação de dados para o MainPage. Atualize-o CommunityToolkit.Mvvm.ComponentModel para herdar de ObservableObject no namespace Isso também exigirá a atualização da 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 Clicar 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 Kit de Ferramentas MVVM para criar o código clichê MVVM para INotifyPropertyChanged implementações e IRelayCommand . A IncrementCounter implementação do método 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++;

            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 MainPage seguir ao construtor após a chamada para InitializeComponenent(). Esse 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 para ContentPage 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 ButtonMainPage para usar um Command em vez de manipular o Clicked evento. O comando será associado à IncrementCounterCommand propriedade pública 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!" em MainPage.xaml. Salve o arquivo e observe que o XAML Recarga Dinâmica atualiza a interface do usuário enquanto o aplicativo ainda está em execução:

Próximas etapas

Saiba como criar um aplicativo que exibe 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 o Microsoft API do Graph com o .NET MAUI no Windows