Valeurs propres à la plateforme en XAML

L’expérience visuelle de votre application sera différente sur chaque plateforme. Vous devrez souvent ajuster votre interface utilisateur pour chaque plateforme, en fonction des éléments visuels que vous utilisez. .NET MAUI vous permet de gérer la disposition de votre application en fonction de ces propriétés d’appareil.

Cette unité décrit les fonctionnalités que .NET MAUI fournit pour vous permettre de modifier l’interface utilisateur de vos applications en fonction de la plateforme sur laquelle elles s’exécutent.

Utilisation de la classe Device

La classe DeviceInfo est une classe utilitaire qui fournit des informations spécifiques de l’appareil sur lequel votre application s’exécute. Elle expose ces informations par le biais d’un ensemble de propriétés. La propriété la plus importante est DeviceInfo.Platform, qui retourne une chaîne indiquant le type d’appareil actuellement utilisé : Android, iOS, WinUI ou macOS.

Considérez le scénario suivant comme un exemple de cas où vous pourriez utiliser cette fonctionnalité. Le comportement par défaut d’une application iOS .NET MAUI est que le contenu ajouté à une page empiète sur la barre d’état iOS en haut de l’écran. Supposons que vous souhaitez modifier ce comportement. La solution la plus simple consiste à déplacer le contenu vers le bas dans la page. La solution Notes que vous avez créée dans l’exercice précédent résout ce problème en définissant la propriété Padding du contrôle VerticalStackLayout de façon à déplacer le contenu de 60 points :

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

Le souci est que ce problème n’apparaît que sur iOS. Déplacer le contenu à ce point sur Android et WinUI entraîne un gaspillage de l’espace d’écran disponible en haut de la page.

Vous pouvez interroger la propriété DeviceInfo.Platform pour résoudre ce problème d’affichage. Vous pouvez ajouter le code suivant au constructeur de page de votre application pour étendre la marge intérieure jusqu’en haut de la page, mais uniquement pour iOS :

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

Ce code fonctionne, mais il se trouve dans le fichier code-behind de la page. La marge intérieure est une valeur spécifique à l’interface utilisateur. En fait, il est plus approprié et plus pratique de procéder à partir du XAML plutôt qu’à partir du code-behind.

Utilisation de l’extension de balisage OnPlatform

Le langage XAML .NET MAUI fournit l’extension de balisage OnPlatform qui vous permet de détecter la plateforme d’exécution à partir de l’intérieur de votre code XAML. Vous pouvez appliquer cette extension de balisage dans le code XAML qui définit une valeur de propriété. L’extension requiert que vous fournissiez le type de la propriété, ainsi qu’une série de blocs On Platform dans lesquels vous définissez la valeur de la propriété en fonction de la plateforme.

Vous pouvez définir la Padding propriété comme ceci. Notez que le type de la propriété Padding est Thickness :

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

Pour des plateformes autres que iOS, la marge intérieure reste définie sur sa valeur par défaut, « 0.0.0.0 ». Pour WinUI et Android, vous pouvez définir la marge intérieure sur 30 points avec des blocs OnPlatform supplémentaires :

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

Vous pouvez appliquer cette même technique à d’autres propriétés. L’exemple ci-dessous modifie la couleur d’arrière-plan de la disposition de pile dans une page en argent sur iOS, en vert sur Android et en jaune sur Windows.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

Cette syntaxe est un peu verbeuse, mais il existe une syntaxe réduite disponible pour l’extension OnPlatform. Vous pouvez simplifier l’exemple qui définit la marge intérieure comme suit :

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

Vous pouvez spécifier une valeur par défaut pour une propriété, ainsi que toutes les valeurs spécifiques à la plateforme. Dans cette forme, le paramètre de type est déduit de la propriété à laquelle l’attribut OnPlatform est appliqué.

Pour définir la couleur d’arrière-plan, vous pouvez utiliser ce fragment XAML à la place du deuxième exemple précédent :

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>