Exercice : Utiliser des ressources au niveau de l’application.

Effectué

L’objectif de cet exercice est de rendre des ressources disponibles dans plusieurs pages en les déplaçant vers un dictionnaire de ressources dans la classe Application de Tip Calculator.

Cet exercice est la suite de l’exercice précédent. Utilisez votre solution existante comme point de départ pour ces étapes, ou ouvrez le projet TipCalculator dans le dossier exercise4/TipCalculator du dépôt que vous avez cloné dans le premier exercice.

Vérifier les ressources au niveau de la page

Vérifions d’abord que les ressources définies dans une page ne sont pas disponibles dans une autre page. À la fin de cette section, votre application ne s’exécute pas correctement. Vous corrigez néanmoins ce problème dans la section suivante.

1. Dans le projet TipCalculator, ouvrez le fichier CustomTipPage.xaml.

2. Définissez la ressource infoLabelStyle comme style pour l’étiquette billLabel, et supprimez les paramètres existants pour les propriétés FontSize et FontAttributes.

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

3. Exécutez l'application.

4. Sélectionnez Utiliser la calculatrice personnalisée pour afficher la page CustomTipPage. Examinez l’étiquette Bill. La taille de la police doit être inférieure à celle des autres étiquettes et la police n’est pas en gras. Ce comportement est dû au fait que la page n’a trouvé aucune ressource nommée infoLabelStyle (elle se trouve dans le dictionnaire de ressources d’une autre page), de sorte que les valeurs par défaut sont utilisées pour la taille et les attributs de la police.

   

Créer un dictionnaire de ressources au niveau de l’application

Nous allons maintenant créer un dictionnaire de ressources au niveau de l’application pour y stocker les ressources communes à plusieurs pages.

1. Ouvrez le fichier App.xaml. Notez que ce fichier contient actuellement un dictionnaire de ressources avec certains dictionnaires de ressources et styles existants qui sont utilisés par défaut pour les contrôles intégrés dans .NET MAUI. Pour afficher tous les styles inclus par défaut, consultez le fichier 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. Ouvrez le fichier StandardTipPage.xaml, puis déplacez la ressource fontSize et les styles baseLabelStyle et infoLabelStyle vers le dictionnaire de ressources dans le fichier App.xaml. Placez-les après les styles existants afin que le fichier App.Xaml ressemble à l’exemple suivant :

   <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. Exécutez l'application.

4. Sélectionnez l’onglet Utiliser la calculatrice personnalisée et vérifiez que le style de l’étiquette Bill est maintenant correct.