Ejercicio: Usar recursos de nivel de página

Completado

Todos los ejercicios de este módulo están relacionados con la aplicación creada previamente TipCalculator. 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 valores XAML repetidos.

En este módulo se usa el SDK de .NET 9.0. Asegúrese de que tiene instalado .NET 9.0 mediante la ejecución del siguiente comando en el terminal de comandos que prefiera:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

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

Asegúrese de que aparezca una versión que comience en 9. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 9.0.

Abrir la solución de inicio

1. Clone o descargue el repositorio de ejercicios desde 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 compilación excedan 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 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 invertirán los colores del fondo y el texto.

   El botón Usar calculadora personalizada cambia la presentación 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 del 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 de la "columna derecha" en Navy y el tamaño de punto puntos 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"   ... />
   

   Tenga en cuenta el trabajo relacionado con 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 id. 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 id. 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 id. 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 LayoutRoot Grid.

   ...
   <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 todavía muestra texto oscuro sobre un fondo claro en el inicio como antes.

Nota:

En este momento, no se preocupe por el estilo de CustomTipPage o los temas Claro y Oscuro; solucionará estos problemas más adelante.