Exercício: crie sua primeira página XAML

  • {númeroDeMinutos} minutos

Os engenheiros da sua empresa de fornecimento de energia fazem regularmente visitas aos clientes para reparar aparelhos e executam outras tarefas de manutenção elétrica. Parte do aplicativo permite que o engenheiro faça anotações sobre a visita. Ele exibe um editor simples onde o engenheiro pode inserir os detalhes e salvá-los.

No Android, o aplicativo tem esta aparência:

O aplicativo do engenheiro rodando no Android, mostrando a página do editor.

Foi-lhe pedido para adicionar mais algumas funcionalidades a esta página. Antes de começar, você quer entender como a página foi criada, então você olha para o código-fonte. Observe que a interface do usuário foi criada inteiramente usando código C#. Embora essa abordagem funcione, ela mistura o código que manipula o layout com o código que controla a maneira como a interface do usuário funciona. Você percebe que, em pouco tempo, há o perigo de os dois aspetos do aplicativo ficarem bloqueados, dificultando a manutenção futura e, possivelmente, tornando o aplicativo mais frágil à medida que mais recursos são adicionados. Você decide separar o design da interface do usuário da lógica da interface do usuário extraindo o código C# que define o layout do aplicativo e substituindo-o por uma página XAML.

Este módulo utiliza o SDK .NET 10.0. Certifique-se de que tem o .NET 10.0 instalado executando o seguinte comando no terminal de comandos preferido:

dotnet --list-sdks

Saída semelhante ao exemplo a seguir aparece:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Certifique-se de que uma versão que começa com 10 está listada. Se não aparecer nenhum ou se o comando não for encontrado, instale o SDK .NET 10.0 mais recente.

Rever a aplicação existente

  1. Clone o repositório GitHub para este exercício localmente no seu computador.

    Nota

    É melhor clonar ou baixar o conteúdo do exercício para um caminho de pasta curta, como C:\dev, para evitar que os arquivos gerados pela compilação excedam o comprimento máximo do caminho.

  2. Mova para a pasta exercise1 em sua cópia local do repositório.

  3. Abra o arquivo de solução Notes.sln Visual Studio nesta pasta ou a pasta no Visual Studio Code.

  4. Na janela Gerenciador de Soluções, expanda o projeto Notes, expanda o arquivo MainPage.xaml e abra o arquivo MainPage.xaml.cs.

  5. Analise a classe MainPage definida neste arquivo. O construtor contém o seguinte código que cria a interface do usuário:

    public MainPage()
{
    var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };

    editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
    editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;

    var buttonsGrid = new Grid() { HeightRequest = 40.0 };
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });

    var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
    saveButton.Clicked += OnSaveButtonClicked;
    Grid.SetColumn(saveButton, 0);
    buttonsGrid.Children.Add(saveButton);

    var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
    deleteButton.Clicked += OnDeleteButtonClicked;
    Grid.SetColumn(deleteButton, 2);
    buttonsGrid.Children.Add(deleteButton);

    var stackLayout = new VerticalStackLayout 
    { 
        Padding = new Thickness(30, 60, 30, 30),
        Children = { notesHeading, editor, buttonsGrid }
    };

    this.Content = stackLayout;
}

    A interface do usuário é composta por um VerticalStackLayout contendo um Label, Editore um Grid com três colunas. A primeira coluna contém o controle saveButton , a segunda é um espaçador e a terceira coluna tem o controle deleteButton .

    O diagrama a seguir ilustra a estrutura da interface do usuário:

    Um diagrama da estrutura da interface do usuário para o aplicativo Notes.

    Observe que a classe MainPage também contém métodos de manipulação de eventos para os botões e algum código que inicializa o Editor controle. Esse código não é diferenciado da definição da interface do usuário.

  6. Crie e execute o aplicativo no Windows, apenas para ver como ele se parece. Selecione F5 para criar e executar o aplicativo.

  7. Feche o aplicativo e retorne ao Visual Studio ou Visual Studio Code quando terminar.

Criar uma versão XAML da interface do usuário

  1. Abra o arquivo MainPage.xaml . A marcação nesta página representa uma página de conteúdo MAUI vazia:

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

</ContentPage>

  2. Adicione um VerticalStackLayout controle à página de conteúdo:

    <ContentPage ...>
    <VerticalStackLayout Margin="30,60,30,30">

    </VerticalStackLayout>
</ContentPage>

  3. Adicione um Label controle ao VerticalStackLayoutarquivo . Defina as propriedades Text, HorizontalTextAlignment e FontAttributes desse controle conforme mostrado abaixo:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label Text="Notes"
               HorizontalOptions="Center"
               FontAttributes="Bold" />
    </VerticalStackLayout>
</ContentPage>

  4. Adicione um Editor controle ao VerticalStackLayout:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
    </VerticalStackLayout>
</ContentPage>

  5. Adicione uma criança Grid ao VerticalStackLayout. Esta Grid deve ter três colunas, a primeira e a terceira são dimensionadas automaticamente, enquanto a segunda tem uma largura de 30:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ColumnDefinitions="Auto, 30, Auto">

        </Grid>
    </VerticalStackLayout>
</ContentPage>

  6. Adicione um Button à primeira coluna do filho Grid. Este é o botão Salvar :

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    Clicked="OnSaveButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

  7. Adicione outro Button à terceira coluna do filho Grid. Este é o botão Excluir :

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button ... />

            <Button Grid.Column="2"
                    Text="Delete" 
                     WidthRequest="100"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

Remova o código de layout do arquivo code-behind

  1. Na janela Gerenciador de Soluções, expanda o nó MainPage.xaml e abra o arquivo MainPage.xaml.cs.

  2. Remova o campo Editor da classe MainPage .

  3. No arquivo MainPage.xaml.cs, no construtor MainPage, remova todo o código que cria os elementos da interface do usuário e substitua-os por uma chamada para o método InitializeComponent. Adicione código que verifica se o arquivo usado para armazenar as anotações existe e, em caso afirmativo, lê o conteúdo e preenche o campo Texto do controle Editor. O construtor deve ter esta aparência:

    public partial class MainPage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public MainPage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
        {
            editor.Text = File.ReadAllText(_fileName);
        }
    }

    ...
}

  4. No menu Build (Compilar), selecione Rebuild Solution (Recompilar Solução). Verifique se o aplicativo é compilado sem erros.

  5. Execute a aplicação. Deve funcionar exatamente como antes.

  6. Se você tiver tempo, implante e execute o aplicativo usando o emulador Android. A interface do usuário do aplicativo deve ser semelhante à mostrada na imagem no início deste exercício.