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

L’objectif de cet exercice est de rendre des ressources disponibles dans plusieurs pages de votre application .NET Multi-Platform App UI (MAUI) 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 dans le 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 pas trouvé de ressource nommée infoLabelStyle (elle se trouve dans le dictionnaire de ressources pour une autre page), de sorte que les valeurs par défaut sont utilisées pour la taille de police et les attributs de 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, affichez 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 et déplacez la ressource fontSize , ainsi que 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 Utiliser l’onglet Calculatrice personnalisée et vérifiez que l’étiquette de facturation est maintenant correctement styleée.