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

  • 4 minutes

Définir des ressources et des styles sur une page XAML (Extensible Application Markup Language) est un excellent moyen de réduire le code répété. 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 .NET Multi-Platform App UI (MAUI).

Emplacement des dictionnaires de ressources disponibles

La classe VisualElement définit la propriété Resources . Les contrôles, les pages et les mises en page héritent de VisualElement. Ils ont donc toutes une propriété Resources qui peut contenir un dictionnaire de ressources.

La classe Application définit également une propriété Resources . L’application n’hérite pas de VisualElement. Par conséquent, 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 affichés a une propriété Resources qui peut 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 Affichage fait référence à un contrôle singleton tel que Button ou Label qui ne fait pas office de conteneur pour les 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 peut être conservé dans un contrôle StackLayout .

Diagramme de la structure générale d’une application .NET MAUI classique.

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

Vous définissez des ressources et des styles au niveau de l’application dans le fichier XAML associé à votre classe Application . Le code suivant montre comment déclarer une ressource Color 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 permet de considérer les instances VisualElement sur les pages comme formant une structure de type arborescence. 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 visuelle. 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. Commencez la recherche avec le dictionnaire dans l’instance VisualElement à laquelle la ressource est appliquée. Dans l'exemple précédent, la recherche débute par le type Label. À 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 à rechercher est la page, bien que si une disposition est imbriquée à l’intérieur d’une autre disposition (par exemple, une grille dans un StackLayout), la recherche déplace l’arborescence vers la disposition parente.

  4. Recherchez dans le dictionnaire la classe Application .

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 aux mises en page, puis aux pages, puis à l’application.

Dans la pratique, la plupart des développeurs ignorent la propriété Resources dans les vues et les gabarits. 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.

Remarque

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 est indépendante, ce qui signifie que la même valeur x :Key peut être utilisée dans plusieurs dictionnaires. Le fait d’avoir le même identificateur x :Key dans plusieurs dictionnaires sur le chemin de recherche n’entraîne pas d’erreur. La ressource associée à la première valeur x :Key correspondante sur le chemin est celle utilisée.

Par exemple, supposons que vous ayez la ressource suivante définie dans votre classe Application :

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

Ensuite, vous définissez la ressource suivante dans un ContentPage et l’appliquez à une étiquette sur cette même page :

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

Étant donné que la première valeur x :Key correspondante est utilisée, la propriété Text est définie sur One.