Esercizio - Usare le risorse a livello di applicazione

Completato

L'obiettivo di questo esercizio è rendere le risorse disponibili in più pagine in .NET MAUI spostandole in un dizionario risorse nella lezione sull’Applicazione Calcolatrice delle mance.

Questo esercizio è una continuazione dell'esercizio precedente. Usare la soluzione esistente come punto di partenza per questi passaggi oppure aprire il progetto TipCalculator nella cartella exercise4/TipCalculator nel repository clonato nel primo esercizio.

Verificare le risorse a livello di pagina

Si verificherà ora che le risorse definite in una pagina non siano disponibili in un'altra pagina. L'app non viene eseguita correttamente alla fine di questa sezione. Nella sezione successiva tuttavia viene spiegato come correggere il problema.

1. Nel progetto TipCalculator aprire il file CustomTipPage.xaml.

2. Impostare la risorsa infoLabelStyle come stile per l'etichetta billLabel e rimuovere le impostazioni esistenti per le proprietà FontSize e FontAttributes.

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

3. Eseguire l'app.

4. Selezionare Usa calcolatrice personalizzata per visualizzare la pagina CustomTipPage. Osservare l'etichetta Fattura. Le dimensioni del carattere devono essere inferiori rispetto alle altre etichette e non devono essere in grassetto. Il motivo di tale comportamento è che la pagina non ha trovato una risorsa denominata infoLabelStyle (si trova nel dizionario risorse per una pagina diversa), quindi vengono usati i valori predefiniti per le dimensioni e gli attributi del carattere.

   

Creare un dizionario per le risorse a livello di applicazione

Creiamo un dizionario risorse a livello di applicazione per contenere le risorse da usare in più pagine.

1. Aprire il file App.xaml. Si noti che attualmente questo file contiene un dizionario risorse con alcuni stili e dizionari risorse esistenti usati per impostazione predefinita per i controlli incorporati in .NET MAUI. Per visualizzare tutti gli stili inclusi per impostazione predefinita, visualizzare il file 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. Aprire il file StandardTipPage.xaml e spostare la risorsa fontSize e gli stili baseLabelStyle e infoLabelStyle nel dizionario risorse nel file App.xaml. Posizionarli dopo gli stili esistenti in modo che il file App.Xaml sia simile all'esempio seguente:

   <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. Eseguire l'app.

4. Selezionare la scheda Usa calcolatrice personalizzata e verificare che l'etichetta Fattura abbia ora lo stile corretto.