Extensions de balisage XAML

Une grande partie de votre définition XAML sera finalisée au moment de la compilation. Souvent, vous savez déjà comment les éléments doivent être positionnés, quelles couleurs et quelles polices seront utilisées, et quelles valeurs littérales doivent être attribuées aux propriétés.

Mais il est parfois nécessaire de définir une propriété sur une valeur qui ne peut pas être déterminée au moment de la compilation. Ces valeurs sont connues uniquement lorsque le programme est en cours d’exécution. Vous pouvez alors créer un objet qui fournit une valeur à XAML au moment de l’exécution. XAML prend en charge les extensions de balisage à cet effet.

Dans cette unité, vous allez apprendre à créer et à utiliser des extensions de balisage.

Qu’est-ce qu’une extension de balisage ?

Une extension de balisage est une classe utilisée en XAML pour accéder aux valeurs d’exécution. Imaginez que vous avez défini un grand nombre d’étiquettes dans votre interface utilisateur XAML, et que vous souhaitez affecter la même valeur à la propriété FontSize dans l’ensemble de l’application pour vous assurer que le style de toutes les étiquettes est cohérent. Vous pouvez définir la propriété FontSize à l’aide de XAML comme indiqué dans l’exemple suivant :

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="28"
            HorizontalOptions="CenterAndExpand"/>

Vous pouvez réutiliser ce même paramètre pour chaque étiquette, mais que se passera-t-il si vous souhaitez modifier cette valeur ultérieurement ? Pour procéder à la modification, vous devez rechercher chaque instance de cette propriété. Supposez également que vous ne savez pas quelle valeur utiliser ; celle-ci pourrait être calculée au moment de l’exécution en fonction de facteurs tels que l’orientation de l’appareil, la résolution de l’écran ou d’autres considérations. Dans ce cas, vous aurez besoin de quelque chose de plus sophistiqué qu’un littéral codé en dur. C’est là qu’une extension de balisage peut se révéler utile. Les extensions de balisage vous apportent de la flexibilité dans la façon dont vous obtenez une valeur utilisée dans le XAML.

Créer une extension de balisage

Une extension de balisage est une classe qui implémente l’interface Microsoft.Maui.Controls.Xaml.IMarkupExtension . Cette interface définit une méthode, nommée ProvideValue, avec la signature suivante :

public object ProvideValue(IServiceProvider serviceProvider)
{
    ...
}

Cette méthode a pour but de fournir une valeur à votre balisage XAML. Notez que le type de retour est object, de sorte que la valeur peut être de n’importe quel type tant qu’elle convient à l’emplacement dans lequel elle est utilisée. Par exemple, dans une extension de balisage qui calcule et renvoie une taille de police, le type de retour doit être un double.

Le paramètre serviceProvider contient des informations contextuelles sur l’emplacement où l’extension de balisage est utilisée dans votre code XAML ; entre autres informations, il identifie le contrôle auquel l’extension est appliquée.

Vous pouvez conserver l’extension de balisage pour la propriété simple FontSize. Dans l’exemple suivant, la classe MainPage expose un champ double nommé MyFontSize. La classe GlobalFontSizeExtension implémente l’interface IMarkupExtension, et la méthode ProvideValue retourne la valeur de la variable MyFontSize :

namespace MyMauiApp;

public partial class MainPage : ContentPage
{
    public const double MyFontSize = 28;

    public MainPage()
    {
        InitializeComponent();
        ...
    }
    ...
}

public class GlobalFontSizeExtension : IMarkupExtension
{
    public object ProvideValue(IServiceProvider serviceProvider)
    {
        return MainPage.MyFontSize;
    }
}

Appliquer l’extension de balisage à un contrôle en XAML

Pour utiliser l’extension de balisage dans votre code XAML, ajoutez l’espace de noms contenant la classe GlobalFontSizeExtension à la liste des espaces de noms dans la balise ContentPage. Dans l’exemple suivant, cet espace de noms reçoit l’alias mycode :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycode="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">

Vous pouvez utiliser l’extension de balisage pour définir la propriété FontSize comme suit. Notez que la convention est qu’une extension de balisage a le suffixe Extension dans son nom. XAML reconnaît ce suffixe, et il n’est pas nécessaire de l’inclure lorsque vous appelez l’extension à partir de votre code XAML. Dans l’exemple suivant, la classe GlobalFontSizeExtension est référencée simplement comme GlobalFontSize :

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="{mycode:GlobalFontSize}"
            HorizontalOptions="CenterAndExpand"/>

Vous pouvez appliquer la même extension de balisage dans tout votre code XAML pour tout contrôle devant spécifier la taille de la police. Par la suite, si vous décidez de changer la taille de la police, il vous suffira de modifier la définition de la variable MyFontSize dans la classe MainPage.

Classe StaticExtension

Aussi utile que soit l’extension de balisage GlobalFontSize, il est peu probable que vous soyez amené à créer une telle extension. Et ce, pour une raison simple : NET MAUI fournit déjà une extension plus généralisée qui vous permet de référencer n’importe quelle valeur statique dans votre code. Cette extension se nomme StaticExtension, ou parfois Static. Le code suivant montre le plan de base de cette classe d’extension :

[ContentProperty ("Member")]
public class StaticExtension : IMarkupExtension
{
    public string Member {get; set;}
    public object ProvideValue (IServiceProvider serviceProvider)
    {
        ...
    }
}

Pour utiliser cette classe dans votre code XAML, fournissez le nom de la variable statique que vous souhaitez référencer dans la propriété Member, et la méthode ProvideValue retourne la valeur dans cette variable. L’exemple suivant illustre son utilisation :

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="{x:Static Member=mycode:MainPage.MyFontSize}"
            HorizontalOptions="CenterAndExpand"/>

.NET MAUI fournit un ensemble d’autres classes d’extension de balisage, que vous pouvez utiliser pour des scénarios tels que la liaison de données, le référencement de ressources et de styles dynamiques, et la gestion de tableaux de données.