Types et propriétés dans le langage XAML .NET MAUI
XAML est un langage de balisage déclaratif. Il est conçu dans l’idée de simplifier le processus de création de votre interface utilisateur. Les éléments du XAML représentent directement l’instanciation des objets auxquels vous accédez dans les fichiers code-behind.
Dans cette unité, vous allez apprendre à utiliser les types disponibles dans le langage XAML, ainsi qu’à définir et lire les propriétés de ces types.
Où les types sont-ils définis ?
.NET MAUI implémente un analyseur XAML qui analyse vos éléments XAML déclarés et instancie chaque élément en tant que type .NET. Le dialecte XAML que l’analyseur .NET MAUI comprend est spécifique à .NET MAUI, bien qu’il soit similaire à l’utilisation d’autres frameworks XAML, tels que Windows Presentation Foundation.
Les types .NET qui implémentent le code XAML d’éléments identifiés sont implémentés par le code dans plusieurs assemblys .NET. La plupart de ces assemblys sont inclus dans les modèles .NET MAUI. Vous pouvez également utiliser d’autres types personnalisés en chargeant les assemblys appropriés dans le cadre de votre projet. De nombreux assemblys sont disponibles en tant que packages NuGet. La plupart des types courants utilisés par une application MAUI se trouvent dans les packages Microsoft.Maui.Dependencies et Microsoft.Maui.Extensions.
Chaque type est défini dans un espace de noms. Dans votre code XAML, vous spécifiez les espaces de noms pour les types que vous référencez. La plupart des contrôles MAUI se trouvent dans l’espace de noms Microsoft.Maui.Controls, tandis que l’espace de noms Microsoft.Maui définit des types utilitaires tels que Thickness, et l’espace de noms Microsoft.Maui.Graphics inclut des types généralisés tels que Color. La possibilité d’introduire des types de cette façon montre l’extensibilité du langage XAML. Le langage XAML vous permet de créer l’interface utilisateur de votre application en étant libre d’inclure des éléments .NET MAUI, des types .NET et des types personnalisés. Dans la plupart des cas, vous n’avez pas besoin de vous soucier de ces espaces de noms, car ils sont introduits à l’aide de la fonctionnalité de usings implicite de C#qui les ajoute automatiquement à l’échelle de l’application.
Comment instancier des types en XAML
Lorsque vous utilisez le langage XAML pour créer une interface utilisateur, la première étape consiste à instancier les types de contrôles de l’interface utilisateur. En XAML, vous pouvez créer un objet d’un type spécifié à l’aide d’une syntaxe d’élément objet. Une syntaxe d’élément objet est une syntaxe XML bien formée standard qui permet de déclarer un élément. Par exemple, si vous souhaitez créer une étiquette avec une couleur spécifique, votre élément XAML ressemblera au code suivant :
<Label TextColor="AntiqueWhite"/>
L’analyseur XAML .NET MAUI analyse cet élément XAML pour instancier l’objet en mémoire. En effet, l’étiquette XAML analysée est identique au code C# suivant :
var myLabel = new Label
{
TextColor = Color.FromRgb(255, 255, 100)
};
Qu’est-ce qu’un espace de noms XAML ?
N’oubliez pas que, pour que l’analyseur XAML analyse correctement la définition XAML d’un contrôle dans une page, il doit avoir accès au code qui implémente le contrôle et définit ses propriétés. Les contrôles disponibles pour une page .NET MAUI sont implémentés dans une collection d’assemblys installés en même temps que le package NuGet Microsoft.Maui. Les contrôles se trouvent dans un espace de noms .NET dans ces assemblys. En code C#, vous intégrez un espace de noms dans l’étendue avec la directive using. Dans une page XAML, vous référencez un espace de noms avec l’attribut xmlns de la page. Le code suivant montre les espaces de noms que la page XAML créée dans l’unité précédente utilise :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
...
</ContentPage>
Le premier espace de noms, http://schemas.microsoft.com/dotnet/2021/maui, est l’espace de noms par défaut pour la page. Cette forme d’URI d’espace de noms est typique du langage XML, et diffère quelque peu de celles que vous connaissez peut-être en C#. Toutefois, cet URI est simplement un alias pour un ou plusieurs espaces de noms définis par les assemblys dans le package NuGet Microsoft.Maui. Ainsi, la spécification de cet espace de noms au début de la page a pour effet d’inclure tous les types et contrôles .NET MAUI dans l’étendue. Si vous omettez cet espace de noms, vous ne pourrez pas utiliser de contrôles tels que Button, Label, Entry ou StackLayout.
Le deuxième espace de noms, http://schemas.microsoft.com/winfx/2009/xaml, fait référence aux assemblys qui contiennent les différents types intrinsèques .NET, tels que des chaînes, des valeurs numériques et des propriétés. Dans le code XAML ci-dessus, l’alias x est attribué à cet espace de noms. Dans le code XAML de cette page, vous référencez les types dans cet espace de noms en leur attribuant le préfixe x:. Par exemple, chaque page XAML est compilée dans une classe, et vous spécifiez le nom de la classe générée avec l’attribut x:Class de la page :
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
...>
...
</ContentPage>
Vous pouvez référencer des types dans vos propres assemblys en code XAML via un espace de noms XAML. Par exemple, si vous avez des types et des méthodes que vous souhaitez utiliser dans votre code XAML défini dans un espace de noms nommé Utils dans votre projet, vous pouvez ajouter l’espace de noms Utils à la page, comme indiqué dans le code suivant. Dans cet exemple, vous accédez aux types de cet espace de noms en leur attribuant l’alias mycode en guise de préfixe.
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mycode="clr-namespace:Utils"
...>
...
</ContentPage>
Remarque
Vous verrez d’autres exemples de cette technique plus loin dans ce module.
Comment spécifier des valeurs de propriété en XAML
En XML, vous utilisez des attributs pour décrire ou fournir des informations sur un élément. En XAML, vous utilisez des attributs pour définir des propriétés sur le type sous-jacent. Par exemple, si l’on considère le code C# suivant :
var label = new Label { Text = "Username", TextColor = Color.Black };
Cette instruction crée un objet Label et définit les propriétés Text et TextColor. Pour définir des propriétés en XAML, vous utilisez des attributs. Le code XAML correspondant ressemble à ceci :
<Label Text="Username" TextColor="Black" />
Vous remarquerez que les valeurs des propriétés sont différentes dans le code XAML et dans le code C#. Par exemple, dans le code C#, vous utilisez le type Color pour la propriété TextColor. Toutefois, dans la définition XAML, vous définissez TextColor avec une valeur de chaîne. Cela est dû au fait qu’une chaîne est la seule chose valide que vous puissiez utiliser pour une valeur d’attribut XML. Par conséquent, il doit y avoir un moyen de convertir chaque valeur de chaîne en son type correct. En XAML, vous opérez cette conversion à l’aide d’un convertisseur de type.
Qu’est-ce qu’un convertisseur de type ?
Un convertisseur de type convertit un attribut XML spécifié en tant que valeur de chaîne en son type correct. Pour mieux comprendre ce concept, prenez l’exemple suivant :
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />
Ce code crée une Label et définit ses propriétés Text, TextColor, FontSize et FontAttributes.
Commençons par la première propriété, Text. Le texte est déjà une chaîne, ce qui signifie que la page XAML n’a pas besoin d’un convertisseur de type. Ensuite, TextColor utilise le type Color, de sorte que XAML nécessite un convertisseur de type pour traduire la chaîne en valeur Color correspondante. La propriété FontSize étant un nombre entier, le langage XAML nécessite un convertisseur de type pour analyser la chaîne en tant que nombre entier. Enfin, FontAttributes est un exemple d’objet complexe. Vous pouvez combiner les valeurs sous la forme d’une chaîne délimitée par des virgules : « Gras,Italique ». La chaîne délimitée par des virgules est traitée comme une énumération basée sur [Flags], et le convertisseur de type approprié applique à la propriété l’opérateur OR au niveau du bit de la valeur.
.NET MAUI a des convertisseurs de type pour la plupart des classes intégrées, et il utilise automatiquement ces convertisseurs de types. Toutefois, si le convertisseur dont vous avez besoin n’existe pas, vous pouvez écrire votre propre convertisseur et l’associer à votre type pour qu’il puisse être utilisé en XAML.
Affectation d’un type complexe
Les convertisseurs de type conviennent parfaitement aux paramètres de propriété simples. Toutefois, dans certains cas, vous devez créer un objet complet avec ses propres valeurs de propriété. La solution à ce problème consiste à modifier l’affectation de propriété pour utiliser une syntaxe basée sur des éléments. Cette syntaxe correspond au formulaire d’élément de propriété. Cette syntaxe implique la division de la méthode setter de propriété dans le formulaire parent-enfant, où la propriété est exprimée dans une balise d’élément du formulaire Type.PropertyName. Supposons que vous souhaitez affecter un module de reconnaissance de mouvement à une étiquette afin que l’utilisateur de l’application puisse appuyer sur l’étiquette. La reconnaissance de mouvement est un objet complexe qui a ses propres propriétés. En règle générale, ces propriétés doivent être attribuées pour garantir un bon fonctionnement :
<TapGestureRecognizer NumberOfTapsRequired="2" />
Si vous devez affecter cette valeur à une Label, vous pouvez écrire le code XAML comme suit :
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" />
</Label.GestureRecognizers>
</Label>
Le type Label n’a pas de propriété nommée GestureRecognizers. En utilisant le formulaire Élément de propriété, vous pouvez ajouter une TapGestureRecognizer à la liste des mouvements pour le Label.
Propriété de contenu par défaut
Certains contrôles .NET MAUI ont une propriété de contenu par défaut. La propriété de contenu vous permet de spécifier la valeur d’une propriété de contrôle, sans le déclarer explicitement dans le XAML. Regardons le fragment XAML suivant :
<VerticalStackLayout>
<VerticalStackLayout.Children>
<Label Text="Please log in" />
</VerticalStackLayout.Children>
</VerticalStackLayout>
Ce code crée une disposition VerticalStackLayout et ajoute une Label en tant qu’élément enfant. Étant donné qu’il est courant d’ajouter des enfants à un VerticalStackLayout, sa propriété Children est la propriété de contenu par défaut. Cela signifie que vous pouvez ajouter un enfant sans spécifier explicitement les Children, comme suit :
<VerticalStackLayout>
<Label Text="Please log in" />
</VerticalStackLayout>