Ejercicio: uso de recursos para toda la aplicación

Completado

El objetivo de este ejercicio es hacer que los recursos estén disponibles en varias páginas al moverlos a un diccionario de recursos de la clase Aplicación de calculadora de propinas.

Este ejercicio es una continuación del anterior. Use la solución existente como punto de partida para estos pasos o abra el proyecto TipCalculator en la carpeta exercise4/TipCalculator en el repositorio que clonó en el primer ejercicio.

Comprobar recursos de nivel de página

Vamos a comprobar que los recursos definidos en una página no están disponibles en otra. Al final de esta sección, la aplicación no se ejecuta correctamente. Sin embargo, podrá corregirlo en la sección siguiente.

1. En el proyecto TipCalculator, abra el archivo CustomTipPage.xaml.

2. Establezca el recurso infoLabelStyle como el estilo de la etiqueta billLabel y quite la configuración existente de las propiedades FontSize y FontAttributes.

   <Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />
   

3. Ejecutar la aplicación.

4. Seleccione Use Custom Calculator (Usar calculadora personalizada) para mostrar la página CustomTipPage. Mire la etiqueta Bill. El tamaño de fuente debería ser menor que las demás etiquetas, y no está en negrita. Este comportamiento se debe a que la página no encontró un recurso denominado infoLabelStyle (se encuentra en el diccionario de recursos de una página diferente), por lo que se usan los valores predeterminados para el tamaño de fuente y los atributos de fuente.

   

Crear un diccionario de recursos para toda la aplicación

Vamos a crear un diccionario de recursos para toda la aplicación que contenga recursos que se van a usar en varias páginas.

1. Abra el archivo App.xaml. Observe que este archivo contiene actualmente un diccionario de recursos con algunos diccionarios de recursos y estilos existentes que se usan de forma predeterminada para los controles integrados en .NET MAUI. Para ver todos los estilos incluidos de manera predeterminada, consulte el archivo Resources/Styles.xaml.

   <?xml version = "1.0" encoding = "UTF-8" ?>
   <Application 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.App">
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="Resources/Colors.xaml" />
                   <ResourceDictionary Source="Resources/Styles.xaml" />
               </ResourceDictionary.MergedDictionaries>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

2. Abra el archivo StandardTipPage.xaml, mueva el recurso fontSize y los estilos baseLabelStyle y infoLabelStyle al diccionario de recursos del archivo App.xaml. Colóquelos después de los estilos existentes para que el archivo App.Xaml tenga el aspecto siguiente:

   <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                ...>
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="Resources/Colors.xaml" />
                   <ResourceDictionary Source="Resources/Styles.xaml" />
               </ResourceDictionary.MergedDictionaries>
   
               <Color x:Key="bgColor">#C0C0C0</Color>
               <Color x:Key="fgColor">#0000AD</Color>
               <x:Double x:Key="fontSize">22</x:Double>
   
               <Style x:Key="baseLabelStyle" TargetType="Label">
                   <Setter Property="FontSize" Value="{StaticResource fontSize}" />
               </Style>
               <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
                   <Setter Property="FontAttributes" Value="Bold" />
               </Style>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

3. Ejecutar la aplicación.

4. Seleccione la pestaña Use Custom Calculator (Usar calculadora personalizada) y compruebe que la etiqueta de factura tenga ahora el estilo correcto.