Ejercicio: Uso de StackLayout para crear una interfaz de usuario

Completado

En este ejercicio, usará contenedores de StackLayout anidados para organizar las vistas de la interfaz de usuario (UI). La primera captura de pantalla muestra el diseño implementado por el proyecto inicial y la segunda muestra el diseño para el proyecto completado. El trabajo consiste en usar contenedores de StackLayout y LayoutOptions para convertir el proyecto de inicio en la versión terminada.

Exploración de la solución de inicio

La solución de inicio contiene una aplicación de calculadora de propinas totalmente funcional. Empezará por explorar la interfaz de usuario y así comprender lo que hace la aplicación.

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

2. Compile y ejecute la aplicación en su sistema operativo preferido.

3. Escriba un número en el cuadro de texto y use la aplicación para ver cómo funciona.

4. Experimente con los botones de cantidad de propinas y el control deslizante.

5. Cuando haya acabado, cierre la aplicación.

6. Abra MainPage.xaml. Observe que todas las vistas se colocan en un VerticalStackLayout, como se muestra en el siguiente marcado 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>
   

Corrección de la interfaz de usuario

Ahora que ha visto que la aplicación se ejecuta, puede mejorar su aspecto agregando contenedores de HorizontalStackLayout. El objetivo es hacer que la aplicación tenga el aspecto de la captura de pantalla al comienzo del laboratorio.

1. Abra el archivo MainPage.xaml.

2. Agregue 40 unidades de relleno y 10 unidades de espaciado a VerticalStackLayout:

   <VerticalStackLayout Padding="40" Spacing="10">
   

3. Agregue un HorizontalStackLayout para agrupar el control Label con el texto Bill con el campo Entry situado debajo. Establezca la propiedad Spacing en 10.

4. Establezca el WidthRequest de Factura Label en 100 y la propiedad VerticalOptions en Center. Estos cambios garantizan que la etiqueta esté alineada verticalmente con el campo Entry.

   <HorizontalStackLayout Spacing="10">
       <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
       <Entry ... />
   </HorizontalStackLayout>
   

5. Agregue otro HorizontalStackLayout para agrupar el control Label con el texto Tip con el control Label denominado tipOutput. Establezca la propiedad Spacing en 10 y la propiedad Margin en 0,20,0,0.

6. Establezca el WidthRequest de Propinas Label en 100

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

7. Use un HorizontalStackLayout para agrupar el control Label con el texto Total con el control Label denominado totalOutput. Establezca la propiedad Spacing en 10.

8. Establezca el WidthRequest de Total Label en 100

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

9. Agregue otro HorizontalStackLayout para agrupar el control Label con el texto Tip Percentage con el control Label denominado tipPercent.

10. Establezca la propiedad VerticalOptions de este HorizontalStackLayout en End y establezca la propiedad Spacing en 10:

11. Establezca el WidthRequest de Porcentaje de propinas Label en 100

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

12. Use un HorizontalStackLayout para agrupar Button con el título 15 % y Button con el título 20 %.

13. Establezca la propiedad Margin de este StackLayout en 0,20,0,0, y la propiedad Spacing en 10:

    <HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
        <Button Text="15%" ... />
        <Button Text="20%" ... />
    </HorizontalStackLayout>
    

14. Agregue al final un HorizontalStackLayout para agrupar Button con el título, Round Down y Button con el título Round Up.. Establezca la propiedad Margin de este StackLayout en 0,20,0,0, y la propiedad Spacing en 10:

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button ... Text="Round Down" />
            <Button ... Text="Round Up" />
    </HorizontalStackLayout>
    

15. En los cuatro controles de botón, establezca la propiedad HorizontalOptions en Center y la propiedad WidthRequest en 150. Por ejemplo:

    <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />
    

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

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

Examen de los resultados

Vuelva a ejecutar la aplicación y observe las diferencias en la interfaz de usuario. Compruebe que los controles estén alineados correctamente y que tengan el tamaño y el espacio adecuados.

Ha usado contenedores de VerticalStackLayout y HorizontalStackLayout para mejorar la estética de una interfaz de usuario existente. Estos diseños son los paneles de diseño más simples, pero son lo suficientemente potentes para producir una interfaz de usuario razonable.