Les extensions de balisage sont une technique XAML permettant d'obtenir une valeur qui n'est ni une primitive ni un type XAML spécifique. C’est-à-dire ?
Les Extensions XAML
Généralement, pour l'utilisation des attributs, les extensions de balisage sont identifiées en étant couvertes par une accolade de début et de fin. Par exemple :
{x:Static local:AppConstants.DefaultName}Nous avons de nombreuses extensions déjà créées comme x:Reference et x:Static, entre autres généralement identifiables par le préfixe « x: » dans la syntaxe.
Dans cet article, je vais vous montrer les extensions de balisage les plus utilisées afin que vous puissiez en tirer parti dans vos projets .NET MAUI !
Le x:null
L’extension x:null est l’équivalent XAML du null C#. Et c’est bien utile ! Prenons par exemple la définition d’un style implicite pour les Label de notre App :
<Style TargetType="Label">
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="21" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
</Style>
Ce style définit quelques propriétés dont la famille de fonte.
Imaginons que ayons besoin de créer un Label un peu particulier qui ne doit pas prendre la fonte définie par le style implicite, comment procéder ? Nous ne souhaitons pas définir une nouvelle fonte, juste « annuler » l’affectation du style implicite… Voici comment le null XAML nous aidera :
<StackLayout>
<Label Text="Hello people!" />
<Label Text="Thanks for being here!" />
<Label Text="Welcome to this article" FontFamily="{x:Null}" />
</StackLayout>
Les tableaux x:Array
L'extension de balisage x:Array permet de définir un tableau dans le balisage. Contrairement aux autres extensions, elle ne se place pas entre accolades. Au lieu de cela, elle s’identifie avec ses propres balises de début et de fin. Par exemple :
<x:Array Type="{x:Type Color}">... </x:Array>
Le type permet d’indiquer le type de chaque élément du tableau, et Items est une collection d’instances de ce type. N’oubliez jamais que XAML est un langage déclaratif dont le seul but est la création d’instance ! Toute balise XAML crée une instance de quelque chose. Si on ne comprend pas cet aspect XAML peut rester un peu étrange alors qu’en réalité il ne sert qu’à cela et lorsqu’on l’a compris tout s’éclaire !
Voici un exemple d’utilisation de l’extension tableau pour initialiser une collection visuelle uniquement en XAML sans code behind ni binding :
<CollectionView.ItemsSource>
<x:Array Type="{x:Type Color}">
<Color>Pink</Color>
<Color>Yellow</Color>
<Color>Blue</Color>
</x:Array>
</Collection.ItemsSource>
A l’intérieur de de la CollectionView on va créer un tableau de type Color qui sera affecté à la propriété ItemsSource de cette CollectionView. La balise x:Array permet ensuite de déclarer le contenu du tableau, ici une liste de couleurs. Le tout étant fortement typé comme on peut s’y attendre sous XAML/C#.
L’extension de Type
x:Type est une extension de balisage XAML équivalente au typeof(mot-clé) C#. Il renvoie le type d’un objet de cette classe ou structure et est couramment utilisé avec l'extension x:Array comme nous l'avons vu dans l'exemple ci-dessus.
L’extension OnIdiom
Non, ce n’est pas une façon un peu rude de décrire un collègue un peu lourd. Ainsi une espèce d’Idiom n’est pas une expression clivante, bien qu’elle serve il est vrai à créer des groupes distincts. Blague à part, cette extension est particulièrement utile puisqu’elle permet d’adapter et de personnaliser l’interface utilisateur en fonction du type de device (comme le montre le dessin ci-dessous).
Comme pour toutes les extensions XAML, le suffixe « extension » peut être omis, ce qui rend le code moins verbeux. De même si on doit définit une valeur « par défaut » hors de celles définies par l’Idiom il suffira d’utiliser le nom de l’extension sans préciser le type de device. Le mieux est un exemple :
<Label Text="This is a test"
FontSize="{OnIdiom 20,Tablet=25, Phone=28}"/>
Ici on indique que le Label aura une fonte de taille 25 sur tout ce qui est considéré comme étant une Tablette, et de 28 sur tout ce qui est considéré comme étant un smartphone. Mais en même temps on définit une taille de 20 par défaut dans le cas où le code tournerait sur une device autre qu’un smartphone ou une tablette.
C’est simple, mais très pratique pour les mises en page qui prennent en compte le form factor.
L’extension OnPlatform
C’est un peu une cousine de la précédente. S’il est intéressant de déterminer le form factor sur lequel le code XAML s’exécute (pour adapter la taille des fontes, des espacements…) il est souvent tout aussi crucial de repérer sur quel OS l’application tourne. On sait que par exemple la zone écran retournée par un iPhone ne continent pas la réserve supérieure (date, batterie…) alors qu’Android en tient compte. De fait une mise en page valable pour ces deux OS devra ajouter une petite marge sur un IPhone. Et c’est grâce à OnPlatform que le code pourra savoir qu’il se trouve dans cette configuration.
Voici un exemple d’utilisation de cette extension :
<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
HorizontalOptions="Center" />
Ici de nombreux éléments sont définis en fonction de la plateforme de runtime. La couleur de la BoxView d’abord, puis sa largeur et sa hauteur. Ce code n’est pas là pour dire qu’il faut programmer de la sorte, c’est juste un exemple qui montre l’extension en action.
L’extension FontImage
L'extension FontImage permet d'afficher une icône de police dans n'importe quelle vue pouvant afficher un fichier ImageSource. Il fournit les mêmes fonctionnalités que la classe FontImageSource, mais avec une représentation plus concise.
- FontImage est prise en charge par la classe FontImageExtension, qui définit les propriétés suivantes :
- FontFamily de type string, la famille de polices à laquelle appartient l'icône de police.
- Glyph de type string, la valeur du caractère unicode de l'icône de la police.
- Color de type Color, la couleur à utiliser lors de l'affichage de l'icône de la police.
Size de type double, la taille, en unités indépendantes du périphérique, de l'icône de police rendue. La valeur par défaut est 30.
En outre, cette propriété peut être définie sur une taille de police nommée.
Exemple :
<Image BackgroundColor="#D1D1D1"
Source="{FontImage , FontFamily=Ionicons, Size=44}" />
Si vous testez ce code vous découvrirez l’icône de la .. Xbox !
L’extension Static
L'entension Static est prise en charge par la classe StaticExtension. La classe a une seule propriété nommée Member de type string que vous définissez sur le nom d'une constante publique, d'une propriété statique, d'un champ statique ou d'un membre d'énumération. Des éléments qui d’habitude ne peuvent pas être liés à du XAML.
Une façon d'utiliser x:Static consiste à définir d'abord une classe avec des constantes ou des variables statiques :
static class AppConstants
{
public static double NormalFontSize = 18;
}
Le code XAML suivant illustre comment utiliser la constante de code C# dans un code XAML :
(extrait)
<StackLayout Margin="10, 0">
<Label Text="Label No. 1">
<Label.FontSize>
<x:Static Member="local:AppConstants.NormalFontSize" />
</Label.FontSize>
</Label>
L’extension de Référence
L'extension de balisage x:Reference a une propriété unique appelée Name de type string qui définit le nom d'un élément sur la page qui a reçu un nom avec x:Name, afin de pouvoir y faire référence directement par son nom. Cette extension est utilisée exclusivement avec les liaisons de données (bindings).
<Label Text="{Binding Source={x:Reference page},
StringFormat='The type of this page is {0}'}"/>
Pour des exemples plus détaillés je vous conseille de vérifier la documentation Microsoft de MAUI.
Conclusion
Les extensions de balisage sont l’une des forces de XAML que bien d’autres système ne propose pas. Si on réduit au fur et à mesure XAML à une description verbeuse pour créer des carrés et des labels il est évident que bien d’autres procédés en vogue peuvent donner l’illusion d’une certaine efficacité.
La réalité est toute autre. Le XAML, le vrai, le dur, le tatoué, celui de WPF et qu’on retrouve petit à petit sous MAUI, est d’une puissance incroyable qu’aucun autre langage de description visuel n’a encore égalé. Et je ne parle pas de toutes les primitives graphiques du XAML de WPF, ni même de ses capacités de 3D hélas absentes.
XAML est simple (il se borde a créer des instances de classe !) mais sophistiqué (ce qui le rend parfois un peu difficile à apprendre au départ, mais parce qu’il est mal expliqué !). Prenez les extensions de balisage présentées aujourd’hui… Savez-vous que vous pouvez écrire les vôtres en C# ? Non ? Je vous en parlerai un jour alors… (si je ne l’ai pas déjà fait dans les 15 années précédentes de l’existence de Dot.Blog !).
Stay Tuned !