Ejercicio: Usar recursos de nivel de página

Todos los ejercicios de este módulo se relacionan con la aplicación TipCalculator precompilada. Puede modificar y mejorar esta aplicación en todo el módulo. En este ejercicio, se usan recursos de nivel de página para eliminar los valores repetidos en el código de lenguaje XAML (XAML).

Este módulo usa el SDK de .NET 10.0. Asegúrese de que tiene instalado .NET 10.0 ejecutando el siguiente comando en el terminal de comandos preferido:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Asegúrese de que aparece una versión que comienza por 10. Si no aparece ninguno o no se encuentra el comando, instale el SDK de .NET 10.0 más reciente.

Apertura de la solución de inicio

1. Clonar o descargar el repositorio de ejercicios de GitHub.

   Nota

   Es mejor clonar o descargar el contenido del ejercicio en una ruta de acceso de carpeta corta, como C:\dev, para evitar que los archivos generados por la compilación superen la longitud máxima de la ruta de acceso.

2. Abra la solución de inicio desde la carpeta exercise1/TipCalculator mediante Visual Studio o abra esta carpeta directamente en Visual Studio Code.

3. Compruebe que se compila y se ejecuta en el entorno. (Vale cualquier plataforma).

4. Dedique unos minutos a examinar y ejecutar la aplicación para entender cómo se comporta.

   La aplicación proporciona dos páginas. La página StandardTipPage es una calculadora de propinas sencilla. Escriba un valor y la página calculará la propina (15 %) y el total pendiente. En la imagen siguiente se muestra la aplicación que se ejecuta en un dispositivo Android:

   

   Los botones Claro y Oscuro permiten cambiar el tema de color de la página. El predeterminado es el tema claro. Si selecciona Oscuro, se invierten los colores del fondo y el texto.

   El botón Usar calculadora personalizada cambia la pantalla a la página CustomTipPage . Esta página permite modificar el porcentaje de la propina mediante un control deslizante. También puede seleccionar los botones 15% y 20% para calcular la propina en función de las tarifas predefinidas.

   

Búsqueda de XAML repetido

1. Abra el archivo StandardTipPage.xaml .

2. Busque el marcado XAML que establece el color de fondo de la cuadrícula LayoutRoot . Observe que usa un valor codificado de forma rígida.

   <Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">
   

3. Buque el marcado XAML que establece el color de texto de las etiquetas de la "columna izquierda" en Navy y el tamaño de fuente en 22. Observe que estos mismos valores se usan en tres etiquetas.

   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="Navy" FontSize="22" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="Navy" FontSize="22" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="Navy" FontSize="22" ... />
   

4. Busque el código XAML que establece el color de las etiquetas en la "columna derecha" en Navy y el tamaño de fuente en 22. Observe que estos mismos valores se usan en dos etiquetas.

   Algunos de los valores de propiedad parecen formar un grupo lógico. Por ejemplo, la combinación de Navy y 22 se usa en varias etiquetas.

   <!-- Right column = user input and calculated-value output -->
   <Entry ... />
   <Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" FontSize="22"   ... />
   <Label x:Name="totalOutput" Text="0.00" TextColor="Navy" FontSize="22"   ... />
   

   Considere el trabajo implicado en la modificación de los valores TextColor y FontSize . Tendría que cambiarlo en cinco lugares.

Definir recursos

Ahora vamos a crear recursos en XAML, por lo que puede empezar a eliminar parte del código repetido que encuentre en la aplicación.

1. Abra el archivo StandardTipPage.xaml .

2. Defina un recurso Color dentro de una sección ContentPage.Resources . Asigne al recurso un identificador de recurso x:Key de bgColor y el valor #C0C0C0 (también puede usar el nombre del color Silver).

3. Defina un segundo recurso Color . Asígnele un identificador de recurso x:Key de fgColor y el valor #0000AD (también puede usar el nombre del color Navy).

4. Defina un recurso x:Double con un identificador de fontSize. Establezca el valor de este recurso en 22.

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                ...>
   
       <ContentPage.Resources>
           <ResourceDictionary>
               <Color x:Key="bgColor">#C0C0C0</Color>
               <Color x:Key="fgColor">#0000AD</Color>
               <x:Double x:Key="fontSize">22</x:Double>
           </ResourceDictionary>
       </ContentPage.Resources>
   
       <Grid x:Name ="LayoutRoot" ...>
           ...
   

Usar recursos estáticos

Ahora vamos a aplicar los recursos creados.

1. Use la extensión de marcado StaticResource para aplicar el recurso bgColor a la propiedad Background del control LayoutRootGrid .

   ...
   <Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">
   

2. Aplique el recurso fgColor a la propiedad TextColor de todos los controles Label que actualmente establecen el TextColor en Navy. Además, reemplace el tamaño de fuente codificado de forma rígida por el recurso estático fontSize .

   ...
   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   ...
   

3. Ejecute la aplicación. Compruebe que StandardTipPage sigue mostrando texto oscuro en un fondo claro al inicio, como hizo antes.