Exercice : Utiliser des ressources de niveau page
Tous les exercices de ce module se rapportent à l’application TipCalculator préconçue. Vous modifiez et améliorez cette application tout au long du module. Dans cet exercice, vous utilisez des ressources au niveau de la page pour éliminer les valeurs XAML répétées.
Ce module utilise le kit de développement logiciel (SDK) .NET 8.0. Assurez-vous que .NET 8.0 est installé en exécutant la commande suivante dans votre terminal de commandes préféré :
dotnet --list-sdks
Une sortie semblable à l’exemple suivant s’affiche :
6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]
Vérifiez que la liste comporte une version commençant par 8. S’il n’y en a pas ou que la commande est introuvable, installez la dernière version du kit de développement logiciel (SDK) .NET 8.0.
Ouvrir la solution de démarrage
Clonez ou téléchargez le dépôt des exercices à partir de GitHub.
Remarque
Il est préférable de cloner ou de télécharger le contenu de l’exercice dans un chemin de dossier court, tel que C:\dev, pour éviter que les fichiers générés par la build dépassent la longueur maximale de chemin.
Ouvrez la solution de démarrage à partir du dossier exercise1/TipCalculator si vous utilisez Visual Studio ou de ce dossier directement dans Visual Studio Code.
Vérifiez qu’elle est générée et qu’elle s’exécute correctement dans votre environnement (sur la plateforme de votre choix).
Prenez quelques minutes pour examiner et exécuter l’application afin d’en comprendre son fonctionnement.
L’application fournit deux pages. La page StandardTipPage est une calculatrice de pourboires simple. Vous entrez une valeur et la page calcule le pourboire (15 %) et le total dû. L’image suivante montre l’application exécutée sur un appareil Android :
Les boutons Clair et Foncé vous permettent de changer le thème de couleur de la page. La valeur par défaut est le thème Clair. Si vous sélectionnez Foncé, les couleurs de l’arrière-plan et du texte sont inversées.
Le bouton Utiliser la calculatrice personnalisée permet de basculer dans la page CustomTipPage. Cette page vous permet de faire varier le pourcentage des pourboires à l’aide d’un curseur. Vous pouvez également sélectionner les boutons 15 % et 20 % pour calculer le pourboire en fonction des taux prédéfinis.
Rechercher les valeurs XAML répétées
Ouvrez le fichier StandardTipPage.xaml.
Recherchez le balisage XAML qui définit la couleur d’arrière-plan de la grille LayoutRoot. Notez qu’il utilise une valeur codée en dur.
<Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">Recherchez le balisage XAML qui définit la couleur de texte des étiquettes dans la « colonne de gauche » sur Navy et la taille de police sur 22. Notez que ces mêmes valeurs sont appliquées à trois étiquettes.
<!-- 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" ... />Recherchez le code XAML qui définit la couleur des étiquettes dans la « colonne de droite » sur Navy et la taille de point sur 22. Notez que ces mêmes valeurs sont appliquées à deux étiquettes.
Certains paramètres de la propriété semblent former un groupe logique. Par exemple, la combinaison Navy/22 est utilisée pour les différentes étiquettes.
<!-- 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" ... />Pensez au travail impliqué dans la modification des valeurs TextColor et FontSize. Il faudrait faire cette modification à cinq endroits.
Définir les ressources
Nous allons maintenant créer des ressources en XAML, afin de pouvoir commencer à éliminer une partie du code répété que vous avez trouvé dans l’application.
Ouvrez le fichier StandardTipPage.xaml.
Définissez une ressource Color dans une section ContentPage.Resources. Attribuez à la ressource un ID de ressource x:Key de bgColor et la valeur #C0C0C0 (vous pourriez également utiliser le nom de la couleur
Silver).Définissez une deuxième ressource Color. Attribuez à un ID de ressource x:Key de fgColor et la valeur #0000AD (vous pourriez également utiliser le nom de la couleur
Navy).Définissez une ressource x:Double avec un ID de fontSize. Définissez la valeur de cette ressource sur 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" ...> ...
Utiliser des ressources statiques
Vous allez maintenant appliquer les ressources que vous venez de créer.
Utilisez l’extension de balisage StaticResource pour appliquer la ressource bgColor à la propriété Background du contrôle LayoutRoot Grid.
... <Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">Appliquez la ressource fgColor à la propriété TextColor de tous les contrôles Label qui définissent actuellement TextColor sur Navy. De plus, remplacez la taille de police codée en dur par la ressource statique 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}" ... /> ...Exécutez l’application. Vérifiez que StandardTipPage affiche toujours le texte foncé sur un arrière-plan clair au démarrage, comme avant.
Notes
Ne vous souciez pas du style pour CustomTipPage ou les thèmes Clair et Foncé à ce stade ; vous résoudrez ces problèmes plus tard.