Ejercicio: Uso de Grid para crear una interfaz de usuario

En este ejercicio usará un Grid para organizar las vistas en la interfaz de usuario (UI). Empezará con otra versión del proyecto TipCalculator y lo ajustará para que la interfaz de usuario sea más intuitiva. También moverá los botones a la parte inferior de la página. Esta vez usará un diseño Grid en lugar de usar VerticalStackLayout y HorizontalStackLayout. La imagen siguiente muestra la interfaz de usuario inicial y la interfaz de usuario resultante tras seguir los pasos de este ejercicio:

Apertura de la solución de inicio

La solución de inicio contiene una aplicación de calculadora de propinas totalmente funcional.

1. Con Visual Studio, abra la solución inicial en la carpeta exercise3/TipCalculator del repositorio que ha clonado al comienzo del ejercicio anterior.

2. Abra MainPage.xaml. Observe que todas las vistas se muestran con un panel VerticalStackLayout:

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

Creación de un diseño Grid

1. Cambie el panel de diseño de VerticalStackLayout a Grid con un espaciado interno de 40 unidades.

2. Defina siete filas y dos columnas para Grid. Convierta todas las filas a tamaño Auto, excepto la cuarta. La cuarta fila debe usar Star para obtener todo el espacio restante disponible en la cuadrícula. Use el tamaño Star para ambas columnas.

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

Ubicación de las vistas en las celdas

1. Agregue valores para Grid.Row y Grid.Column a cada una de las vistas para asignarlas a la celda correspondiente en Grid. Use la captura de pantalla siguiente como guía para determinar dónde se debe colocar cada vista:

   

   El ejemplo siguiente muestra cómo establecer la posición de la FacturaLabel,y la vista billInputEntry:

   ...
   <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. Alinee la FacturaLabel y Entry estableciendo la propiedad VerticalOptions en Center para la Etiqueta.

3. Agregue un valor para Grid.ColumnSpan a Slider para que abarque dos columnas:

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

4. Busque el elemento Label con el texto Porcentaje de propina. Establézcalo para que ocupe la posición inferior izquierda en su rectángulo:

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

5. Busque el elemento Label denominado tipPercent. Establézcalo para que ocupe la posición inferior derecha en su rectángulo:

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

6. Establezca la propiedad Margin de los cuatro botones en 5.

El marcado completo del lenguaje XAML de la página debe tener este aspecto:

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

Examen de los resultados

Ejecute la aplicación y observe las diferencias en la interfaz de usuario. Ha usado un diseño Grid para mejorar la estética de una interfaz de usuario existente. Grid es más eficaz que StackLayout. En particular, Grid hace que sea mucho más fácil alinear las vistas entre filas.