8 extensions de balisage très utiles dans .NET MAUI

Découvrez huit des extensions de balisage XAML les plus courantes et les plus utiles pour .NET MAUI.

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. 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 example: {x:Static local:AppConstants.DefaultName}.

Nous avons de nombreuses extensions déjà créées comme x:Reference et x:Staticentre autres généralement identifiables par le préfixe « x : » dans la syntaxe.

Dans cet article, nous allons explorer huit des extensions de balisage les plus utilisées afin que vous puissiez en tirer parti dans .NET MAUI !

1. x:Extension de balisage nul

Le x:Null l’extension de balisage est équivalente à la null mot-clé en C#.

Regardons un cas d’utilisation :

1. Déclarez un style implicite pour les étiquettes. (⚠ Si vous n’avez pas travaillé avec des styles implicites, vous pouvez vérifier ce lien.)

   <Style TargetType="Label">
        <Setter Property="FontAttributes"  Value="Bold" />
        <Setter Property="FontSize"  Value="21" />
        <Setter Property="FontFamily"  Value="OpenSansRegular" />
   </Style>
   

2. Étant donné que les styles implicites s’appliquent à tous les contrôles du même type indiqués dans le style (dans ce cas, Labels), nous avons besoin ici d’un Label spécifique pour ne pas prendre la même FontFamily que les autres, nous allons donc procéder à l’ajout du x:Null.

3. <StackLayout>
         <Label Text="Hello people!" />
         <Label Text="Thanks for being here!" />
         <Label Text="Welcome to this article"  FontFamily="{x:Null}"  />
   </StackLayout>
   

2. x:Extension de balisage de tableau

Le x:Array L’extension de balisage vous permet de définir un tableau dans le balisage. Contrairement aux autres extensions, nous ne verrons pas celle-ci entre accolades. Au lieu de cela, nous l’identifions avec ses propres balises de début et de fin. Par example: <x:Array Type="{x:Type Color}">... </x:Array>.

Pour l’utiliser, nous devons ajouter les propriétés suivantes :

• Taper permet d’indiquer le type des éléments du tableau. Pour l’utiliser, vous devez écrire la structure suivante :

• Articles est une collection des éléments qui composeront votre tableau. Pour l’envoyer, vous devez garder à l’esprit la structure suivante :

Et en fusionnant les instructions précédentes, vous aurez un exemple comme celui-ci :

<CollectionView.ItemsSource>
  <x:Array Type="{x:Type Color}">
    <Color>Pink</Color>
    <Color>Yellow</Color>
    <Color>Blue</Color>
  </x:Array>
</Collection.ItemsSource>

3. x:Extension de balisage de type

x:Type est une extension de balisage XAML équivalente au C# typeof mot-clé. Il renvoie le Type objet de cette classe ou structure et est couramment utilisé avec le x:Array extension de balisage (comme nous l’avons vu dans l’exemple ci-dessus).

4. x: Extension de balisage OnIdiom

x:OnIdiom vous permet d’adapter/personnaliser l’apparence de l’interface utilisateur de votre application en fonction de la langue de l’appareil sur lequel une application s’exécute.

Il est soutenu par le OnIdiomExtension classe (vous pouvez aussi l’abréger en OnIdiom), qui définit les propriétés suivantes :

⚠ Informations complémentaires :

• Si vous comptez utiliser la « valeur par défaut », vous ne devez pas l’ajouter. Ajoutez simplement : « OnIdiom + la valeur souhaitée ».
• Vous pouvez également passer un Converter de type IValueConverter ou un ConverterParameter de type objet.

Faisons un exemple dans le code :

Dans le code suivant, nous montrons un Label qui a un FontSize différent selon qu’il s’agit d’un téléphone ou d’une tablette et une valeur par défaut.

<Label Text="This is a test" 
       FontSize="{OnIdiom 20,Tablet=25, Phone=28}"/>

5. x: Extension de balisage OnPlatform

x:OnPlatform vous permet d’adapter/personnaliser l’apparence de l’interface utilisateur de votre application en fonction de la plate-forme sur laquelle une application s’exécute.

Il est soutenu par le OnPlatformExtension classe (vous pouvez aussi l’abréger en OnPlatform), qui définit les propriétés suivantes :

⚠ J’aime OnIdiom, vous pouvez simplement éliminer Default et ajouter la valeur de la propriété. Par example: OnPlatform Pink. Et vous pouvez également utiliser les Converters et ConverterParameters.

6. x:Extension de balisage FontImage

Le x:FontImage L’extension de balisage vous permet d’afficher une icône de police dans n’importe quelle vue pouvant afficher une ImageSource.

Il est soutenu par le FontImageExtension classe (vous pouvez aussi l’abréger en FontImage), qui définit les propriétés suivantes :

⚠ Informations complémentaires :

• Si vous comptez utiliser le « glyphe », vous ne devez pas l’ajouter. Ajoutez simplement : « FontImage + la valeur souhaitée ».

7. x:Extension de balisage statique

Le x:Static La classe a une seule propriété nommée Member, qui est de type chaîne, 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.

Il est soutenu par le StaticExtension classe (vous pouvez aussi l’abréger en Static).

Un exemple de comment nous pouvons l’utiliser:

1. Créons une classe avec une constante.

   static class SampleConstants 
    {
        public static double DefaultlFontSize = 18;
    }
   

2. Ensuite, récupérons la valeur dans le XAML.

   <Label Text="This is a test.">
      <Label.FontSize>
         <x:StaticExtension Member="local:SampleConstants.NormalFontSize" />
      </Label.FontSize>
   </Label>
   

Et.. Voila! 😎 Pour obtenir la valeur, il est important de garder à l’esprit la structure suivante :

8. x:Extension de balisage de référence

Le x:Reference l’extension de balisage a une seule propriété appelée Name de type string qui définit le nom d’un élément de la page qui a reçu un nom avec x:Name, afin que nous puissions faire référence à ce contrôle particulier directement par son nom. Cette extension est utilisée exclusivement avec les liaisons de données.

Regardons un exemple :

1. Ajoutons un nom à notre page avec x:Name. Dans ce cas, nous l’appellerons « page ».

   <ContentPage ...
      x:Class="MarkupExtensionsApp.MainPage"
      x:Name="page"
      xmlns:local="clr-namespace:MarkupExtensionsApp">
   

2. Enfin, obtenons les informations du x:Name en utilisant le x:Reference extension de balisage.

   <Label Text="{Binding Source={x:Reference page},
     StringFormat="The type of this page is {0}"}"/>
   

Conclusion

J’espère que cette liste d’extensions de balisage super utiles a fonctionné pour vous ! Je vous invite à les utiliser et à continuer d’en explorer d’autres existantes afin de pouvoir les intégrer à votre quotidien ! 💚💕

À la prochaine! 💁‍♀️

Références

Cet article était basé sur la documentation officielle :