Créer et utiliser des ressources au niveau de l’application

  • 4 minutes

Définir des styles et des ressources dans une page XAML est un bon moyen de réduire les répétitions de code. Il reste toutefois un problème. Ces ressources et styles sont disponibles uniquement dans cette page XAML spécifique. L’utilisation de dictionnaires de ressources au niveau de la page ne permet pas d’éliminer totalement les répétitions de code dans une application multipage. Dans cette unité, vous allez voir comment partager des ressources et des styles entre toutes les pages de votre application.

Emplacement des dictionnaires de ressources disponibles

La classe VisualElement définit la propriété Resources. Les contrôles, les pages et les dispositions héritant de la classe VisualElement, ils ont tous une propriété Resources qui peut contenir un dictionnaire de ressources.

La classe Application définit également une propriété Resources. La classe Application n’héritant pas de la classe VisualElement, la propriété est définie dans le cadre de cette classe.

L’illustration suivante montre la structure d’une application standard. Chacun des éléments présentés a une propriété Resources pouvant contenir un dictionnaire de ressources.

Remarque

Ce diagramme montre une description très simplifiée de la façon dont les éléments d’une application sont organisés. Dans ce diagramme, le terme View (Affichage) fait référence à un contrôle singleton tel que Button (Bouton) ou Label (Étiquette) qui n’agit pas comme conteneur pour de quelconques contrôles enfants. En outre, le terme Layout (Disposition) implique un conteneur chargé d’organiser la disposition de ses contrôles enfants. Une disposition peut être imbriquée. Par exemple, un contrôle Grid (Grille) peut être conservé dans un contrôle StackLayout.

Diagramme de la structure de haut niveau d’une application .NET MAUI classique.

Comment définir des styles et des ressources au niveau de l’application

Vous définissez les ressources et styles au niveau de l’application dans le fichier XAML associé à la classe Application. Le code suivant montre comment déclarer une ressource Color (Couleur) dans le dictionnaire de ressources d’application.

<Application.Resources>
    <Color x:Key="MyTextColor">Blue</Color>
</Application.Resources>

Comment .NET MAUI trouve une ressource ou un style

Supposons que vous appliquez une ressource à l’un de vos contrôles, comme dans le code suivant.

<Label TextColor="{StaticResource MyTextColor}" ... />

.NET MAUI doit trouver la définition de cette ressource afin de pouvoir appliquer la valeur. Une même application peut avoir plusieurs dictionnaires. Dans quels dictionnaires .NET MAUI va-t-elle chercher et dans quel ordre ? Pour répondre à ces questions, il est utile de se représenter les instances VisualElement sur les pages comme formant une structure arborescente. L’application se trouve à la racine, avec les pages, les dispositions et les affichages s’étendant en dessous. Cette structure est souvent appelée arborescence de visuels. Chaque élément de l’arborescence peut avoir son propre dictionnaire pouvant contenir des ressources. L’algorithme de recherche de style dans .NET MAUI remonte l’arborescence d'éléments visuels :

  1. La recherche commence par le dictionnaire dans l’instance VisualElement à laquelle la ressource est appliquée. Dans l’exemple précédent, la recherche commence par le type Label (Étiquette). À défaut de dictionnaire de ressources, ou s’il en a un mais que la ressource n’y figure pas, la recherche se poursuit ailleurs.

  2. Déplacez-vous vers le parent du (contrôle) et répétez la recherche. Généralement, l’emplacement de recherche suivant est une disposition.

  3. Vérifiez le parent de la disposition. En règle générale, l’emplacement suivant dans lequel rechercher est la page, bien que, si une disposition est imbriquée dans une autre (par exemple, une disposition Grid (Grille) dans une disposition StackLayout), la recherche remonte dans l’arborescence, vers la disposition parente.

  4. Recherchez la classe Application dans le dictionnaire.

La recherche retourne le premier élément trouvé avec une valeur x:Key correspondante. L’illustration suivante récapitule la séquence de recherche d’une ressource.

Diagramme montrant comment .NET recherche des ressources. Il commence à l’affichage, puis passe aux mises en page, puis aux pages, puis à l’application.

En pratique, la plupart des développeurs ignorent la propriété Resources dans les affichages et les dispositions. Ils utilisent les dictionnaires au niveau de la page pour les éléments figurant dans une seule page. Ils définissent les ressources et styles à partager entre plusieurs pages au niveau de l’application. Le processus de recherche ne doit alors consulter que deux dictionnaires : celui de l’instance de page active et celui de l’application.

Notes

Si aucune ressource avec la clé spécifiée n’est trouvée, l’application utilise les valeurs par défaut pour le style.

Clés en double

Chaque instance ResourceDictionary étant indépendante, la même valeur x.Key peut être utilisée dans plusieurs dictionnaires. La présence du même identificateur x.Key dans plusieurs dictionnaires inclus dans le chemin de recherche ne provoque pas d’erreur. La ressource associée à la première valeur x.Key correspondante dans le chemin est celle utilisée.

Par exemple, supposez que la ressource suivante soit définie dans votre classe Application :

<Application.Resources>
    <x:String x:Key="msg">Two</x:String>
</Application.Resources>

Vous définissez alors la ressource suivante dans une ContentPage et l’appliquez à un contrôle Label (Étiquette) sur cette même page :

<ContentPage.Resources>
    <x:String x:Key="msg">One</x:String>
</ContentPage.Resources>
...
<Label Text="{StaticResource msg}">

La première valeur x.Key correspondante étant utilisée, la valeur de la propriété Text est définie One.