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

Concluído

Neste exercício, você usa a Grid para organizar os modos de exibição na interface do usuário (UI). Você começa com outra versão do projeto TipCalculator e ajusta-o para tornar a interface do usuário mais intuitiva. Você também move os botões para a parte inferior da página. Desta vez, você usa um Grid layout em vez de usar VerticalStackLayout e HorizontalStackLayout. A imagem a seguir mostra a interface do usuário inicial e a interface do usuário que resulta de seguir as etapas deste exercício:

Abra a solução inicial

A solução inicial contém um aplicativo de calculadora de dicas totalmente funcional.

1. Usando o Visual Studio, abra a solução inicial na pasta exercise3/TipCalculator no repositório que você clonou no início do exercício anterior.

2. Abra MainPage.xaml. Observe que todas as visualizações são exibidas usando um VerticalStackLayout painel:

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

Criar um layout de grade

1. Altere o painel de layout de VerticalStackLayout para com Grid preenchimento de 40 unidades.

2. Defina sete linhas e duas colunas para o Grid. Faça com que todas as linhas Auto sejam dimensionadas, exceto a quarta linha. A quarta linha deve ser usada Star para obter todo o espaço restante disponível na grade. Use Star o dimensionamento para ambas as colunas.

   <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
         ColumnDefinitions="*, *"
         Padding="40">
       ...
   </Grid>
   

Posicionar as vistas nas células

1. Adicione configurações para Grid.Row e Grid.Column para cada um dos modos de exibição para atribuí-los à célula apropriada no Grid. Use a captura de tela a seguir para ajudá-lo a determinar onde cada exibição deve ser colocada:

   

   O exemplo a seguir mostra como definir a posição para o Bill Labele o billInput Entry modo de exibição:

   ...
   <Label Text="Bill" Grid.Row="0" Grid.Column="0"/>
   <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>
   ...
   

2. Alinhe a fatura Label e Entry defina a VerticalOptions propriedade como Center no rótulo.

3. Adicione uma configuração para Grid.ColumnSpan o Slider para que ele se estenda por duas colunas:

   <Slider ... Grid.ColumnSpan="2" ... />
   

4. Localize o Label com o texto Porcentagem de dica. Configure-o de modo a que ocupe a posição inferior esquerda no seu retângulo:

   <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" ... />
   

5. Localize o Label tipPercent nomeado. Configure-o de modo que ocupe a posição inferior direita em seu retângulo:

   <Label x:Name="tipPercent" VerticalOptions="End" HorizontalOptions="End" ... />
   

6. Defina a Margin propriedade para todos os quatro botões como 5.

A marcação XAML (Extensible Application Markup Language) completa para a página deve ter esta aparência:

<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">
    <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
          ColumnDefinitions="*, *"
          Padding="40">

        <Label Text="Bill" VerticalOptions="Center" Grid.Row="0" Grid.Column="0"/>
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>

        <Label Text="Tip" Grid.Row="1" Grid.Column="0"/>
        <Label x:Name="tipOutput" Text="0.00" Grid.Row="1" Grid.Column="1"/>

        <Label Text="Total" Grid.Row="2" Grid.Column="0"/>
        <Label x:Name="totalOutput" Text="0.00" Grid.Row="2" Grid.Column="1"/>

        <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"/>
        <Label x:Name="tipPercent" Text="15%" VerticalOptions="End" HorizontalOptions="End" Grid.Row="3" Grid.Column="1"/>
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>

        <Button Text="15%" Clicked="OnNormalTip" Margin="5" Grid.Row="5" Grid.Column="0"/>
        <Button Text="20%" Clicked="OnGenerousTip" Margin="5" Grid.Row="5" Grid.Column="1"/>

        <Button x:Name="roundDown" Margin="5" Text="Round Down" Grid.Row="6" Grid.Column="0"/>
        <Button x:Name="roundUp"   Margin="5" Text="Round Up" Grid.Row="6" Grid.Column="1"/>

    </Grid>
</ContentPage>

Examinar os resultados

Execute o aplicativo e observe as diferenças na interface do usuário. Você usou um Grid para melhorar a estética de uma interface do usuário existente. Grid é mais potente do que StackLayout. Em particular, Grid torna muito mais fácil alinhar as vistas entre linhas.