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

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.

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 WidthRequest para Label e a 100 propriedade para VerticalOptions. 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 LabeltipOutput 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 nomeado totalOutput. 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 Percentagem de gorjeta com o Label nomeado tipPercent.

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

11. Defina a WidthRequest porcentagemcomoLabel

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

12. Use a 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 um final HorizontalStackLayout de modo a 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.