Esercizio - Usare le risorse a livello di pagina
Tutti gli esercizi di questo modulo sono correlati all'applicazione TipCalculator precompilata. Nel corso del modulo quest'app verrà modificata e migliorata. In questo esercizio si usano risorse a livello di pagina per eliminare i valori ripetuti nel codice Extensible Application Markup Language (XAML).
Questo modulo usa .NET 9.0 SDK. Assicurarsi di avere installato .NET 9.0 eseguendo il comando seguente nel terminale dei comandi preferito:
dotnet --list-sdks
Verrà visualizzato un output simile all'esempio seguente:
8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]
Assicurarsi che sia elencata una versione che inizia con 9. Se il comando non è presente nell'elenco o non viene trovato, installare la versione più recente di .NET 9.0 SDK.
Aprire la soluzione iniziale
Clonare o scaricare il repository dell'esercizio da GitHub.
Nota
È meglio clonare o scaricare il contenuto dell'esercizio in un percorso di cartella breve, ad esempio C:\dev, per evitare che i file generati dalla compilazione superino la lunghezza massima del percorso.
Aprire la soluzione iniziale dalla cartella exercise1/TipCalculator usando Visual Studio o questa cartella direttamente in Visual Studio Code.
Verificare che venga compilata ed eseguita nell'ambiente in uso. È possibile usare qualsiasi piattaforma.
Dedicare qualche minuto a esaminare ed eseguire l'applicazione per comprenderne il comportamento.
L'applicazione fornisce due pagine. La pagina StandardTipPage è un semplice strumento di calcolo della mancia. Si immette un valore e la pagina calcola la mancia (15%) e il totale da pagare. L'immagine seguente mostra l'applicazione in esecuzione in un dispositivo Android:
I pulsanti Light e Dark consentono di cambiare il tema colori della pagina. L'impostazione predefinita è il tema chiaro. Se si seleziona Dark, i colori dello sfondo e del testo vengono invertiti.
Il pulsante Use Custom Calculator passa alla pagina CustomTipPage. Questa pagina consente di variare la percentuale della mancia usando un dispositivo di scorrimento. È anche possibile selezionare i pulsanti 15% e 20% per calcolare la mancia in base a tariffe predefinite.
Trovare i valori XAML ripetuti
Aprire il file StandardTipPage.xaml.
Trovare il markup XAML che imposta il colore di sfondo della griglia LayoutRoot. Come si può notare, usa un valore hardcoded.
<Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">Trovare il markup XAML che imposta il colore del testo delle etichette nella "colonna sinistra" su Navy e la dimensione del carattere su 22. Si noti che questi stessi valori vengono usati in tre etichette.
<!-- 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" ... />Trovare il codice XAML che imposta il colore delle etichette nella "colonna destra" su Navy e la dimensione del carattere su 22. Si noti che questi stessi valori vengono usati in due etichette.
Alcune delle impostazioni delle proprietà sembrano costituire un gruppo logico. Ad esempio, la combinazione di Navy e 22 viene usata in più etichette.
<!-- 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" ... />Considerare il lavoro necessario per modificare i valori di TextColor e FontSize. Sarebbe necessario modificarlo in cinque punti diversi.
Definizione delle risorse
Ora si creerà una risorsa in XAML per poter iniziare a eliminare parte del codice ripetuto individuato nell'applicazione.
Aprire il file StandardTipPage.xaml.
Definire una risorsa Color all'interno di una sezione ContentPage.Resources. Assegnare alla risorsa un ID risorsa x:KeybgColor e il valore #C0C0C0 (si può usare anche il nome del colore
Silver).Definire una seconda risorsa Color. Assegnarle un ID risorsa x:KeyfgColor e il valore #0000AD (si può usare anche il nome del colore
Navy).Definire una risorsa x:Double con un ID fontSize. Impostare il valore di questa risorsa su 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" ...> ...
Usare le risorse statiche
A questo punto si applicheranno le risorse create.
Usare l'estensione di markup StaticResource per applicare la risorsa bgColor alla proprietà Background del controllo LayoutRootGrid.
... <Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">Applicare la risorsa fgColor alla proprietà TextColor di tutti i controlli Label il cui TextColor è attualmente impostato su Navy. Inoltre, sostituire le dimensioni del carattere hardcoded con la risorsa statica 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}" ... /> ...Eseguire l'applicazione. Verificare che all'avvio di StandardTipPage venga ancora visualizzato il testo scuro su uno sfondo chiaro, come accadeva prima.
Nota
In questo momento non è necessario preoccuparsi dell'applicazione dello stile per CustomTipPage o per i temi Light e Dark, in quanto verranno trattati in un secondo momento.