Exercício – Usar o StackLayout para criar uma interface do usuário

  • 10 minutos

Neste exercício, você usará contêineres StackLayout aninhados para organizar os modos de exibição na interface do usuário. A primeira captura de tela mostra o layout implementado pelo projeto inicial e a segunda mostra o layout do projeto concluído. Seu trabalho é usar contêineres StackLayout e LayoutOptions para transformar o projeto inicial na versão concluída.

Captura de tela mostrando a solução inicial com todos os rótulos colocados verticalmente próximos. Ao lado, está a solução completa com controles alinhados e posicionados de forma mais intuitiva.

Explorar a solução inicial

A solução inicial contém um aplicativo de calculadora de gorjeta totalmente funcional. Comece explorando a interface do usuário para entender o que o aplicativo faz.

  1. Usando o Visual Studio, abra a solução inicial na pasta exercise2/TipCalculator no repositório clonado no início do exercício anterior.

  2. Compile e execute o aplicativo no sistema operacional de sua preferência.

  3. Insira um número na caixa de texto e use o aplicativo para ver como ele funciona.

  4. Experimente os botões de valor da gorjeta e o controle deslizante.

  5. Quando terminar, feche o aplicativo.

  6. Abra o MainPage.xaml. Observe que todas as exibições são colocadas em um VerticalStackLayout, conforme mostrado pela seguinte marcação XAML:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:TipCalculator"
         x:Class="TipCalculator.MainPage">
    <VerticalStackLayout>

        <Label Text="Bill" />
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />

        <Label Text="Tip"   />
        <Label x:Name="tipOutput" Text="0.00" />

        <Label Text="Total" />
        <Label x:Name="totalOutput" Text="0.00" />

        <Label Text="Tip Percentage" />
        <Label x:Name="tipPercent" Text="15%" />
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <Button Text="15%" Clicked="OnNormalTip" />
        <Button Text="20%" Clicked="OnGenerousTip" />

        <Button x:Name="roundDown" Text="Round Down" />
        <Button x:Name="roundUp"   Text="Round Up" />

    </VerticalStackLayout>
</ContentPage>

Corrigir a interface do usuário

Agora que você viu o aplicativo ser executado, você pode torná-lo melhor adicionando contêineres HorizontalStackLayout. A meta é fazer com que o aplicativo se parece com a captura de tela no início do laboratório.

  1. Abra o arquivo MainPage.xaml.

  2. Adicione 40 unidades de preenchimento e 10 unidades de espaçamento ao VerticalStackLayout:

    <VerticalStackLayout Padding="40" Spacing="10">

  3. Adicione um HorizontalStackLayout para agrupar o Label que informa Fatura com o campo Entry embaixo dele. Defina a propriedade Spacing como 10.

  4. Defina o WidthRequest da fatura como Label e a 100 propriedade VerticalOptions como Center. Essas alterações garantem que o rótulo esteja alinhado verticalmente com o campo Entry.

    <HorizontalStackLayout Spacing="10">
    <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
    <Entry ... />
</HorizontalStackLayout>

  5. Adicione outro HorizontalStackLayout para agrupar o Label que informa Gorjeta com o Label chamado tipOutput. Defina a propriedade Spacing como 10 e a Margin propriedade como 0,20,0,0.

  6. Defina o WidthRequest da Dica Label para 100

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
    <Label Text="Tip" WidthRequest="100" />
    <Label .../>
</HorizontalStackLayout>

  7. Use um HorizontalStackLayout para agrupar o Label que informa Total com o Label chamado totalOutput. Defina a propriedade Spacing como 10.

  8. Defina o WidthRequest do Total Label como100

    <HorizontalStackLayout Spacing="10">
    <Label Text="Total" WidthRequest="100"  />
    <Label .../>
</HorizontalStackLayout>

  9. Adicione outro HorizontalStackLayout para agrupar o Label que informa Percentual da Gorjeta com o Label chamado tipPercent.

  10. Defina a propriedade VerticalOptions desse HorizontalStackLayout como End, e a propriedade Spacing como 10:

  11. Defina o WidthRequest da Porcentagem de gorjeta Label para100

    <HorizontalStackLayout VerticalOptions="End" Spacing="10">
    <Label Text="Tip Percentage" WidthRequest="100"/>
    <Label ... />
</HorizontalStackLayout>

  12. Use o HorizontalStackLayout para agrupar o Button com a legenda 15% e o Button com a legenda 20%.

  13. Defina a propriedade Margin desse StackLayout como 0,20,0,0 e a propriedade Spacing como 10:

    <HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
    <Button Text="15%" ... />
    <Button Text="20%" ... />
</HorizontalStackLayout>

  14. Adicione uma HorizontalStackLayout final para agrupar o Button com a legenda Arredondar para Baixo e a Button com a legenda Arredondar para Cima. Defina a propriedade Margin desse StackLayout como 0,20,0,0 e a propriedade Spacing como 10:

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
        <Button ... Text="Round Down" />
        <Button ... Text="Round Up" />
</HorizontalStackLayout>

  15. Em todos os quatro controles de botão, defina HorizontalOptions a propriedade como Center e a WidthRequest propriedade como 150. Por exemplo:

    <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />

A marcação XAML (Extensible Application Markup Language) completa da página de conteúdo deve ter esta aparência:

<?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"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">

    <VerticalStackLayout Padding="40" Spacing="10">

        <HorizontalStackLayout Spacing="10">
            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Label Text="Tip"  WidthRequest="100" />
            <Label x:Name="tipOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10">
            <Label Text="Total" WidthRequest="100"/>
            <Label x:Name="totalOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
            <Label Text="Tip Percentage" WidthRequest="100"/>
            <Label x:Name="tipPercent" Text="15%" />
        </HorizontalStackLayout>
        
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button Text="15%" Clicked="OnNormalTip" WidthRequest="150" HorizontalOptions="Center"/>
            <Button Text="20%" Clicked="OnGenerousTip"  WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>
        
        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button x:Name="roundDown" Text="Round Down" WidthRequest="150" HorizontalOptions="Center"/>
            <Button x:Name="roundUp"   Text="Round Up" WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>

</ContentPage>

Examinar os resultados

Execute o aplicativo novamente e examine as diferenças na interface do usuário. Verifique se os controles estão alinhados corretamente e são dimensionados e espaçados corretamente.

Você usou os contêineres VerticalStackLayout e HorizontalStackLayout para melhorar a estética de uma interface do usuário existente. Estes layouts são os painéis de layout mais simples, mas são poderosos o suficiente para produzir uma interface do usuário razoável.