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

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.

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 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 diz Bill com o Entry campo abaixo dele. Defina a propriedade Spacing como 10.

4. Defina a WidthRequest da FaturaLabel como 100 e a 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 a WidthRequest da GorjetaLabel como 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 diz Total com o Label nomeado totalOutput. Defina a propriedade Spacing como 10.

8. Defina o valor do WidthRequestTotalLabel para 100

   <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 a WidthRequest do Percentual da gorjetaLabel como 100

    <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 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.