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.

Usando o Visual Studio, abra a solução inicial na pasta exercise2/TipCalculator no repositório clonado no início do exercício anterior.
Compile e execute o aplicativo no sistema operacional de sua preferência.
Insira um número na caixa de texto e use o aplicativo para ver como ele funciona.
Experimente os botões de valor da gorjeta e o controle deslizante.
Quando terminar, feche o aplicativo.

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.

Abra o arquivo MainPage.xaml.
Adicione 40 unidades de preenchimento e 10 unidades de espaçamento ao VerticalStackLayout:
```
<VerticalStackLayout Padding="40" Spacing="10">
```
Adicione um HorizontalStackLayout para agrupar o Label que informa Fatura com o campo Entry embaixo dele. Defina a propriedade Spacing como 10.
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>
```
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.

Defina o WidthRequest da Dica Label para 100

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

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

Defina o WidthRequest do Total Label como100

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

Adicione outro HorizontalStackLayout para agrupar o Label que informa Percentual da Gorjeta com o Label chamado tipPercent.
Defina a propriedade VerticalOptions desse HorizontalStackLayout como End, e a propriedade Spacing como 10:

Defina o WidthRequest da Porcentagem de gorjeta Label para100

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

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

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>

Adicione um HorizontalStackLayout final para agrupar o Button com a legenda, Arredondar para baixo e o 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>
```
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 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 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.

Continuar

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

Explorar a solução inicial

Corrigir a interface do usuário

Examinar os resultados

Comentários