Tutorial: Criar um aplicativo .NET MAUI com a marcação C# e o Kit de Ferramentas da Comunidade

Crie um aplicativo .NET MAUI com uma interface do usuário criada sem XAML usando a Marcação C# do Kit de Ferramentas da Comunidade MAUI do .NET.

Introdução

O .NET MAUI Community Toolkit é um conjunto de extensões, comportamentos, animações e outros auxiliares. Um dos recursos, Marcação em C#, fornece a capacidade de criar uma interface do usuário inteiramente no código C#. Neste tutorial, você aprenderá a criar um aplicativo MAUI do .NET para Windows que usa a Marcação C# para criar a interface do usuário.

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

Observação

Se você já estiver familiarizado com a configuração de um projeto MAUI do .NET, poderá pular para a próxima seção.

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

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

Em seguida, na tela Configurar seu novo projeto , dê um nome ao projeto, escolha um local para ele e clique no botão Avançar .

Na tela final, Informações adicionais, clique no botão Criar .

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

Na barra de ferramentas do Visual Studio, pressione o botão Computador windows para compilar e executar o aplicativo. Clique no botão Clique em mim e verifique se o conteúdo do botão é atualizado com o número de cliques.

Agora que você verificou que o aplicativo .NET MAUI no Windows está funcionando conforme o esperado, podemos integrar os pacotes de marcação MVVM Toolkit e C#. Na próxima seção, você adicionará esses pacotes ao novo projeto.

Adicionar marcação em C# do Kit de Ferramentas da Comunidade .NET MAUI

Agora que você tem seu aplicativo .NET MAUI em execução no Windows, vamos adicionar alguns pacotes NuGet ao projeto para integrar com o Kit de Ferramentas MVVM e a Marcação C# do Kit de Ferramentas da Comunidade .NET MAUI.

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

Na janela Gerenciador de Pacotes NuGet , selecione a guia Procurar e pesquise CommunityToolkit.MVVM:

Adicione a versão estável mais recente do pacote CommunityToolkit.MVVM ao projeto clicando em Instalar.

Em seguida, pesquise CommunityToolkit.Maui:

Adicione a versão estável mais recente do pacote CommunityToolkit.Maui.Markup ao projeto clicando em Instalar.

Feche a janela Gerenciador de Pacotes NuGet depois que os novos pacotes terminarem de ser instalados.

Adicionar um ViewModel ao projeto

Vamos adicionar uma implementação MVVM (Model-View-ViewModel) simples com o Kit de Ferramentas MVVM. Vamos começar criando um viewmodel para emparelhar com nosso modo de exibição (MainPage). Clique com o botão direito do mouse no projeto novamente e selecione Adicionar | Classe do menu de contexto.

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

Vamos aproveitar o poder do Kit de Ferramentas MVVM no MainViewModel. Substitua o conteúdo da classe pelo seguinte código:

using CommunityToolkit.Mvvm.ComponentModel;
using System.ComponentModel;
using System.Diagnostics;

namespace MauiMarkupSample
{
    [INotifyPropertyChanged]
    public partial class MainViewModel
    {
        [ObservableProperty]
        private string name;
        partial void OnNameChanging(string value)
        {
            Debug.WriteLine($"Name is about to change to {value}");
        }
        partial void OnNameChanged(string value)
        {
            Debug.WriteLine($"Name has changed to {value}");
        }
    }
}

Se você concluiu o tutorial Criar seu primeiro aplicativo .NET MAUI para Windows , entenderá o que o código acima faz. A MainViewModel classe é decorada com o INotifyPropertyChanged atributo , que permite que o Kit de Ferramentas MVVM gere a INotifyPropertyChanged implementação para a classe . A marcação MainViewModel como um partial class é necessária para que o gerador de origem do .NET funcione. O ObservableProperty atributo no name campo privado será uma Name propriedade para a classe com a implementação adequada INotifyPropertyChanged . Adicionar os OnNameChanging métodos parciais e OnNameChanged é opcional, mas permite adicionar lógica personalizada quando a Name propriedade está mudando ou foi alterada.

Criar uma interface do usuário com marcação em C#

Ao criar uma interface do usuário com marcação C#, a primeira etapa é atualizar o CreateMauiApp() método em MauiProgram.cs. Substitua o conteúdo do método pelo seguinte código:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMarkup();

    return builder.Build();
}

Você também precisa adicionar uma nova using instrução à parte superior do arquivo: using CommunityToolkit.Maui.Markup;. A chamada para UseMauiCommunityToolkitMarkup() adicionará o suporte à Marcação C# ao aplicativo, permitindo que você construa sua interface do usuário com código C# em vez de XAML.

O arquivo MainPage.xaml não será mais usado ao renderizar a interface do usuário, para que você possa remover o conteúdo do ContentPage.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiMarkupSample.MainPage">
</ContentPage>

Em MainPage.xaml.cs, remova o manipulador de eventos click e adicione três membros privados à classe :

private readonly MainViewModel ViewModel = new();
private enum Row { TextEntry }
private enum Column { Description, Input }

A ViewModel propriedade criará uma instância da MainViewModel classe a ser usada ao associar dados à interface do usuário. As Row enumerações e Column serão usadas para definir o layout da interface do usuário com a Marcação em C#. É uma interface do usuário simples com uma única linha e duas colunas que definiremos na próxima etapa.

Como os elementos da interface do usuário serão definidos no código C#, o InitializeComponent() método não será necessário. Remova a chamada e substitua-a pelo seguinte código para criar a interface do usuário:

public MainPage()
{
    Content = new Grid
    {
        RowDefinitions = Rows.Define(
            (Row.TextEntry, 36)),

        ColumnDefinitions = Columns.Define(
            (Column.Description, Star),
            (Column.Input, Stars(2))),

        Children =
        {
            new Label()
                .Text("Customer name:")
                .Row(Row.TextEntry).Column(Column.Description),

            new Entry
            {
                Keyboard = Keyboard.Numeric,
                BackgroundColor = Colors.AliceBlue,
            }.Row(Row.TextEntry).Column(Column.Input)
                .FontSize(15)
                .Placeholder("Enter name")
                .TextColor(Colors.Black)
                .Height(44)
                .Margin(6, 6)
                .Bind(Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay)
        }
    };
}

O novo código no construtor está aproveitando a MainPage Marcação em C# para definir a interface do usuário. Um Grid é definido como o Content da página. Nossa nova grade define uma linha com uma altura de 36 pixels e duas colunas com suas larguras definidas usando valores star , em vez de valores de pixel absolutos. A Input coluna sempre terá o dobro da largura da Description coluna. O XAML equivalente para essas definições seria:

<Grid.RowDefinitions>
    <RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

O restante do código para criar a grade adiciona dois Children, um Label e um Entry. As Textpropriedades , Rowe Column são definidas no Label elemento e o Entry é criado com as seguintes propriedades:

Propriedade	Valor	Descrição
Row	Row.TextEntry	Define o número da linha.
Column	Column.Input	Define o número da coluna.
FontSize	15	Define o tamanho da fonte.
Placeholder	"Enter name"	Define o texto do espaço reservado a ser exibido quando o elemento estiver vazio.
TextColor	Colors.Black	Define a cor do texto.
Height	44	Define a altura do elemento .
Margin	6, 6	Define a margem em torno do elemento .
Bind	Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay	Associa a Text propriedade do elemento à Name propriedade do modelo de exibição usando a associação de dados bidirecional.

O XAML equivalente para definir esses elementos filho seria:

<Label Text="Customer name:"
       Grid.Row="0" Grid.Column="0" />
<Entry Grid.Row="1" Grid.Column="0"
       FontSize="15"
       Placeholder="Enter name"
       HeightRequest="44"
       Margin="6, 6"
       Text="{Binding Path=ViewModel.Name, Mode=TwoWay}" />

Talvez você tenha notado que a TextColor propriedade não está definida na marcação acima. Definir o TextColor de um controle requer a definição de um estilo personalizado. Para obter mais informações sobre como usar estilos no .NET MAUI, consulte Aplicativos de estilo usando XAML. Este é um exemplo em que a configuração de propriedades na Marcação em C# pode ser mais simplificada do que o XAML equivalente. No entanto, o uso de estilos no adiciona facilidade de reutilização e herança.

Agora você está pronto para executar o aplicativo. Pressione F5 para criar e executar o projeto. O aplicativo deve ser semelhante à seguinte captura de tela:

Agora você criou seu primeiro aplicativo de marcação em C# no Windows com o MAUI do .NET. Para saber mais sobre o que você pode fazer com a Marcação em C#, consulte Documentação de marcação em C#.

Tópicos relacionados

Recursos para aprendizado do .NET MAUI

Documentação do Kit de Ferramentas da Comunidade do .NET MAUI

Documentação de marcação do C#