Exercício - Use StackLayout para criar uma interface de usuário

  • 10 minutos

Neste exercício, você usa contêineres aninhados StackLayout para organizar as exibições na interface do usuário (UI). 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 StackLayout contêineres e LayoutOptions transformar o projeto inicial na versão concluída.

Captura de ecrã a mostrar a solução inicial com todas as etiquetas colocadas verticalmente na proximidade. Ao lado dela, está a solução completa com controles alinhados e posicionados de forma mais intuitiva.

Explore a solução inicial

A solução inicial contém um aplicativo de calculadora de dicas 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 que você clonou no início do exercício anterior.

  2. Crie e execute o aplicativo em seu sistema operacional preferido.

  3. Introduza um número na caixa de texto e utilize a aplicação para ver como funciona.

  4. Experimente os botões de quantidade de ponta e o controle deslizante.

  5. Quando terminar, feche o aplicativo.

  6. Abra MainPage.xaml. Observe que todos os modos de exibição são colocados 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 HorizontalStackLayout contêineres. O objetivo é fazer com que o aplicativo se pareça com a captura de tela no início do laboratório.

  1. Abra o arquivo MainPage.xaml .

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

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

  3. Adicione um HorizontalStackLayout ao grupo Label que diz Bill com o Entry campo abaixo dele. Defina a propriedade Spacing como 10.

  4. Defina o WidthRequestLabel para 100 e a VerticalOptions propriedade para Center. Essas alterações garantem que o rótulo esteja alinhado verticalmente com o Entry campo.

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

  5. Adicione outro HorizontalStackLayout para agrupar o Label que diz Tip com o Label tipOutput nomeado. Defina a Spacing propriedade como 10, e a Margin propriedade como 0,20,0,0.

  6. Defina o WidthRequest da dicaLabel como100

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

  7. Use a HorizontalStackLayout para agrupar o Label que diz Total com o Label totalOutput nomeado. Defina a propriedade Spacing como 10.

  8. Defina o WidthRequest do TotalLabel como 100

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

  9. Adicione outro HorizontalStackLayout para agrupar o Label que diz Porcentagem de dica com a Label tipPercent nomeada.

  10. Defina a VerticalOptions propriedade deste HorizontalStackLayout como End e defina a Spacing propriedade como 10:

  11. Defina a WidthRequest porcentagemLabelcomo100

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

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

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

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

  14. Adicione uma final HorizontalStackLayout para agrupar o Button com a legenda Arredondar para baixo e o Button com a legenda Arredondar para cima.. Defina a Margin propriedade deste StackLayout como 0,20,0,0, e a Spacing propriedade 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 a HorizontalOptions 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 para a 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 observe as diferenças na interface do usuário. Verifique se os controles estão alinhados corretamente e se estão corretamente dimensionados e espaçados.

Você usou VerticalStackLayout e HorizontalStackLayout contêineres para melhorar a estética de uma interface do usuário existente. Esses 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.