Adicionar controles visuais a um aplicativo .NET MAUI

5 minutos

Agora que você usou o modelo .NET MAUI para criar o aplicativo, a próxima etapa é adicionar a interface do usuário e implementar a lógica inicial da interface do usuário.

Nesta unidade, você aprenderá mais sobre os blocos de construção de um aplicativo .NET MAUI (Multi-platform Application User Interface) e estruturas de navegação.

O que há em um projeto .NET MAUI?

Para recapitular, um projeto .NET MAUI contém inicialmente:

O arquivo MauiProgram.cs que contém o código para criar e configurar o objeto Application.
Os arquivos App.xaml e App.xaml.cs que fornecem recursos da interface do usuário e criam a janela inicial para o aplicativo.
Os arquivos AppShell.xaml e AppShell.xaml.cs que especificam a página inicial do aplicativo e manipulam o registro de páginas para roteamento de navegação.
Os arquivos MainPage.xaml e MainPage.xaml.cs que definem o layout e a lógica da interface do usuário para a página exibida por padrão na janela inicial.

Você pode adicionar mais páginas ao aplicativo conforme necessário e pode criar mais classes para implementar a lógica de negócios que o aplicativo exige.

Um projeto .NET MAUI também contém um conjunto padrão de recursos do aplicativo, como imagens, ícones e fontes, e código de bootstrap padrão para cada plataforma.

A classe Application

A App classe representa o aplicativo .NET MAUI como um todo. Ele herda um conjunto padrão de comportamentos do Microsoft.Maui.Controls.Application. Lembre-se da unidade anterior de que é a App classe que o código de bootstrap instancia e carrega para cada plataforma. O App construtor de classe, por sua vez, geralmente criará uma instância da AppShell classe e a atribuirá à MainPage propriedade. É esse código que controla a primeira tela que o usuário vê com base nas definições do AppShell.

A classe App também contém:

Métodos para lidar com eventos do ciclo de vida, incluindo quando o aplicativo é enviado para o plano de fundo (ou seja, quando ele deixa de ser o aplicativo em primeiro plano).
Métodos para criar novos Windows para o aplicativo. O aplicativo .NET MAUI tem uma única janela por padrão, mas você pode criar e iniciar mais janelas, o que é útil em aplicativos de desktop e tablet.

Shell

O Shell .NET Multi-platform App UI (.NET MAUI) reduz a complexidade do desenvolvimento de aplicativos fornecendo os recursos fundamentais que a maioria dos aplicativos exige, incluindo:

Um único local para descrever a hierarquia visual de um aplicativo.
Uma experiência de utilizador de navegação comum.
Um esquema de navegação baseado em URI que permite a navegação para qualquer página no aplicativo.
Um manipulador de pesquisa integrado.

Em um aplicativo .NET MAUI Shell, a hierarquia visual do aplicativo é descrita em uma classe que subclasse a classe Shell. Esta classe pode consistir em três objetos hierárquicos principais:

FlyoutItem ou TabBar. A FlyoutItem representa um ou mais itens no submenu e deve ser usado quando o padrão de navegação do aplicativo requer um submenu. A TabBar representa a barra de guias inferior e deve ser usado quando o padrão de navegação do aplicativo começa com guias inferiores e não requer um submenu.
Tab, que representa o conteúdo agrupado, navegável pelas guias inferiores.
ShellContent, que representa os objetos ContentPage para cada guia.

Esses objetos não representam nenhuma interface do usuário, mas sim a organização da hierarquia visual do aplicativo. O Shell usa esses objetos e produz a interface do usuário de navegação para o conteúdo.

Páginas

As páginas são a raiz da hierarquia da interface do usuário no .NET MAUI dentro de um Shellarquivo . Até agora, a solução que você viu inclui uma classe chamada MainPage. Esta classe deriva de , que é o tipo de ContentPagepágina mais simples e comum. Uma página de conteúdo simplesmente exibe seu conteúdo. O .NET MAUI também tem vários outros tipos de página internos, incluindo:

TabbedPage: A página raiz usada para navegação por guias. Uma página com guias contém objetos de página filho; um para cada separador.
FlyoutPage: Permite implementar uma apresentação no estilo mestre/detalhe. Uma página de submenu contém uma lista de itens. Quando você seleciona um item, uma exibição exibindo os detalhes desse item é exibida.

Outros tipos de página estão disponíveis e são usados principalmente para habilitar diferentes padrões de navegação em aplicativos de várias telas.

Visualizações

Uma página de conteúdo normalmente exibe uma exibição. Uma vista permite-lhe recuperar e apresentar dados de uma forma específica. O modo de exibição padrão para uma página de conteúdo é um ContentView, que exibe os itens no estado em que se encontram. Se você reduzir o modo de exibição, os itens poderão desaparecer da exibição até que você redimensione o modo de exibição. A ScrollView permite que você exiba itens em uma janela de rolagem, se você reduzir a janela, você pode rolar para cima e para baixo para exibir itens. A CarouselView é uma exibição rolável que permite ao usuário percorrer uma coleção de itens. A CollectionView pode recuperar dados de uma fonte de dados nomeada e apresentar cada item usando um modelo como um formato. Há muitos outros tipos de visualizações disponíveis, também.

Controles e layouts

Um modo de exibição pode conter um único controle, como um botão, rótulo ou caixas de texto. (Estritamente falando, um modo de exibição é em si um controle, então um modo de exibição pode conter outro modo de exibição.) No entanto, uma interface de usuário restrita a um único controle não seria tão útil, então os controles são posicionados em um layout. Um layout define as regras pelas quais os controles são exibidos uns em relação aos outros. Um layout também é um controle, para que você possa adicioná-lo a uma exibição. Se você examinar o arquivo MainPage.xaml padrão, verá esta hierarquia de página/exibição/layout/controle em ação. Neste código XAML, o VerticalStackLayout elemento é apenas mais um controle que permite ajustar o layout de outros controles.

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Alguns dos controles comuns usados para definir layouts são:

VerticalStackLayout e HorizontalStackLayout, que são layouts de pilha otimizados que estabelecem controles em uma pilha de cima para baixo ou da esquerda para a direita. A StackLayout também está disponível, que tem uma propriedade chamada StackOrientation que você pode definir como Horizontal ou Vertical. Em um tablet ou telefone, modificar essa propriedade no código do aplicativo permite ajustar a exibição se o usuário girar o dispositivo:
AbsoluteLayout, que permite definir coordenadas exatas para os controles.
FlexLayout, que é semelhante, StackLayout exceto que permite que você envolva os controles filho que contém se eles não se encaixarem em uma única linha ou coluna. Este layout também fornece opções para alinhamento e adaptação a diferentes tamanhos de tela. Por exemplo, um FlexLayout controle pode alinhar seu controle filho à esquerda, à direita ou ao centro quando organizado verticalmente. Quando alinhado horizontalmente, você pode justificar controles para garantir um espaçamento uniforme. Você pode usar um horizontal FlexLayout dentro de um ScrollView para exibir uma série de quadros roláveis horizontalmente (cada quadro pode ser organizado verticalmente FlexLayout):
Grid, que estabelece seus controles de acordo com um local de coluna e linha que você definiu. Você pode definir os tamanhos de colunas e linhas e suas amplitudes, para que os layouts de grade não tenham necessariamente uma aparência de "quadriculado" para eles.

A imagem a seguir resume os principais atributos desses tipos de layout comuns:

Um diagrama dos layouts mais usados em uma interface do usuário .NET MAUI.

Todos os controles têm propriedades. Você pode definir valores iniciais para essas propriedades usando XAML (Extensible Application Markup Language). Em muitos casos, você pode modificar essas propriedades no código C# do seu aplicativo. Por exemplo, o código que manipula o Clicked evento para o botão Clique em mim no aplicativo .NET MAUI padrão tem esta aparência:

int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Esse código modifica a Text propriedade do controle CounterBtn na página. Você pode até mesmo criar páginas, visualizações e layouts inteiros em seu código; você não precisa usar XAML. Por exemplo, considere a seguinte definição XAML de uma página:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

O código equivalente em C# tem esta aparência:

public partial class TestPage : ContentPage
{
    int count = 0;
    
    // Named Label - declared as a member of the class
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

O código C# é mais detalhado, mas fornece mais flexibilidade que permite adaptar a interface do usuário dinamicamente.

Para exibir esta página quando o aplicativo começar a ser executado, defina a TestPage classe como a AppShell principal ShellContent:

<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:TestPage}"
        Route="TestPage" />

Ajustando um layout

É útil adicionar um pouco de espaço de respiração em torno de um controle. Cada controle tem uma Margin propriedade que os layouts respeitam. Você pode pensar na margem como o controle afastando os outros.

Todos os layouts também têm uma propriedade que impede que qualquer um Padding de seus filhos se aproxime da borda do layout. Uma maneira de pensar neste conceito é que todos os controles estão em uma caixa, e essa caixa tem paredes acolchoadas.

Outra configuração de espaço em branco útil é a Spacing propriedade de VerticalStackLayout ou HorizontalStackLayout. Isso define o espaço entre todos os filhos do layout. O valor é aditivo com a própria margem do controle, portanto, o espaço em branco real é margem mais espaçamento.

Verificação de conhecimento

Qual desses tipos não é um tipo de layout no .NET MAUI?

DockableLayout

AbsoluteLayout

StackLayout

Grelha

Qual é a classe usada para criar uma tela no .NET MAUI?

Ecrã

Página

ContentView