Partager via

Syntaxe XAML essentielle

  • Article

Browse sample. Parcourir l’exemple

XAML est principalement conçu pour instancier et initialiser des objets. Mais souvent, les propriétés doivent être définies sur des objets complexes qui ne peuvent pas facilement être représentés en tant que chaînes XML, et parfois les propriétés définies par une classe doivent être définies sur une classe enfant. Ces deux besoins nécessitent les fonctionnalités de syntaxe XAML essentielles des éléments de propriété et des propriétés jointes.

Éléments de propriété

Dans le code XAML de l’interface utilisateur d’application multiplateforme .NET (.NET MAUI), les propriétés des classes sont normalement définies en tant qu’attributs XML :

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18"
       TextColor="Aqua" />

Toutefois, il existe une autre façon de définir une propriété en XAML :

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18">
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Ces deux exemples qui spécifient la TextColor propriété sont fonctionnellement équivalents et permettent d’introduire une terminologie de base :

  • Labelest un élément objet. Il s’agit d’un objet MAUI .NET exprimé en tant qu’élément XML.
  • Text, VerticalOptionsFontAttributes et FontSize sont des attributs de propriété. Il s’agit de propriétés MAUI .NET exprimées sous forme d’attributs XML.
  • Dans le deuxième exemple, TextColor est devenu un élément de propriété. Il s’agit d’une propriété MAUI .NET exprimée en tant qu’élément XML.

Remarque

Dans un élément de propriété, la valeur de la propriété est toujours définie comme contenu entre les balises de début et de fin de l’élément de propriété.

La syntaxe d’élément de propriété peut également être utilisée sur plusieurs propriétés d’un objet :

<Label Text="Hello, XAML!"
       VerticalOptions="Center">
    <Label.FontAttributes>
        Bold
    </Label.FontAttributes>
    <Label.FontSize>
        Large
    </Label.FontSize>
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Bien que la syntaxe de l’élément de propriété semble inutile, il est essentiel que la valeur d’une propriété soit trop complexe pour être exprimée sous forme de chaîne simple. Dans les balises d’élément de propriété, vous pouvez instancier un autre objet et définir ses propriétés. Par exemple, la Grid disposition a des propriétés nommées RowDefinitions et ColumnDefinitions, qui sont de type RowDefinitionCollection et ColumnDefinitionCollection respectivement. Ces types sont des collections et ColumnDefinition des objets, et vous utilisez généralement la syntaxe d’élément de RowDefinition propriété pour les définir :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        ...
    </Grid>
</ContentPage>

Propriétés jointes

Dans l’exemple précédent, vous avez vu que les Grid éléments de propriété requis pour les collections et ColumnDefinitions les RowDefinitions lignes définissent les lignes et les colonnes. Cela suggère qu’il doit y avoir une technique permettant d’indiquer la ligne et la colonne où réside chaque enfant du site Grid .

Dans la balise de chaque enfant de l’enfant Grid que vous spécifiez la ligne et la colonne de cet enfant à l’aide des Grid.Row attributs et Grid.Column des attributs, qui ont des valeurs par défaut de 0. Vous pouvez également indiquer si un enfant s’étend sur plusieurs lignes ou colonnes avec les attributs et Grid.ColumnSpan les Grid.RowSpan valeurs par défaut 1.

L’exemple suivant illustre le placement d’enfants dans un Grid:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Label Text="Autosized cell"
               TextColor="White"
               BackgroundColor="Blue" />
        <BoxView Color="Silver"
                 Grid.Column="1" />
        <BoxView Color="Teal"
                 Grid.Row="1" />
        <Label Text="Leftover space"
               Grid.Row="1" Grid.Column="1"
               TextColor="Purple"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two rows (or more if you want)"
               Grid.Column="2" Grid.RowSpan="2"
               TextColor="Yellow"
               BackgroundColor="Blue"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two columns"
               Grid.Row="2" Grid.ColumnSpan="2"
               TextColor="Blue"
               BackgroundColor="Yellow"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Fixed 100x100"
               Grid.Row="2" Grid.Column="2"
               TextColor="Aqua"
               BackgroundColor="Red"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />

    </Grid>
</ContentPage>

Ce code XAML entraîne la disposition suivante :

.NET MAUI Grid layout.

Les Grid.Rowattributs , Grid.RowSpanet Grid.ColumnSpan les Grid.Columnattributs semblent être des propriétés de la Grid classe, mais cette classe ne définit rien nommé Row, Column, RowSpanou ColumnSpan. Au lieu de cela, la Grid classe définit quatre propriétés pouvant être liées nommées RowProperty, ColumnPropertyet RowSpanProperty, et ColumnSpanPropertyqui sont des types spéciaux de propriétés pouvant être liées appelées propriétés jointes. Ils sont définis par la Grid classe mais définis sur les enfants du Grid.

Remarque

Lorsque vous souhaitez utiliser ces propriétés jointes dans le code, la Grid classe fournit des méthodes statiques nommées GetRow, , GetColumnSetRow, , SetColumn, GetRowSpan, SetRowSpanGetColumnSpanet SetColumnSpan.

Les propriétés jointes sont reconnaissables en XAML en tant qu’attributs contenant à la fois une classe et un nom de propriété séparés par un point. Elles sont appelées propriétés jointes, car elles sont définies par une classe (dans ce cas, Grid) mais attachées à d’autres objets (dans ce cas, enfants du Grid). Pendant la disposition, il Grid peut interroger les valeurs de ces propriétés jointes pour savoir où placer chaque enfant.

Propriétés du contenu

Dans l’exemple précédent, l’objet Grid a été défini sur la Content propriété du ContentPage. Toutefois, la Content propriété n’a pas été référencée dans le code XAML, mais peut être :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <ContentPage.Content>
        <Grid>
            ...
        </Grid>
    </ContentPage.Content>
</ContentPage>

La Content propriété n’est pas obligatoire en XAML, car les éléments définis pour une utilisation dans .NET MAUI XAML sont autorisés à avoir une propriété spécifiée comme ContentProperty attribut sur la classe :

[ContentProperty("Content")]
public class ContentPage : TemplatedPage
{
    ...
}

Toute propriété spécifiée en tant que ContentProperty classe signifie que les balises d’élément de propriété pour la propriété ne sont pas requises. Par conséquent, l’exemple ci-dessus spécifie que tout contenu XAML qui apparaît entre les balises de début et de fin ContentPage est affecté à la Content propriété.

De nombreuses classes ont ContentProperty également des définitions d’attributs. Par exemple, la propriété de contenu est Label Text.

Différences de plateforme

Les applications .NET MAUI peuvent personnaliser l’apparence de l’interface utilisateur par plateforme. Cela peut être réalisé en XAML à l’aide des classes et On des OnPlatform classes :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform est une classe générique et vous devez donc spécifier l’argument de type générique, dans ce cas, Thicknessqui est le type de Padding propriété. Cela est obtenu avec l’attribut x:TypeArguments XAML. La OnPlatform classe définit une Default propriété qui peut être définie sur une valeur qui sera appliquée à toutes les plateformes :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Dans cet exemple, la Padding propriété est définie sur différentes valeurs sur iOS et Android, avec les autres plateformes définies sur la valeur par défaut.

La OnPlatform classe définit également une Platforms propriété, qui est un IList objet On . Chaque On objet peut définir la propriété et Value la Platform Thickness valeur d’une plateforme spécifique. En outre, la Platform propriété de On type est de type IList<string>, vous pouvez donc inclure plusieurs plateformes si les valeurs sont les mêmes :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Il s’agit de la méthode standard pour définir une propriété dépendante de Padding la plateforme en XAML.

Remarque

Si la Value propriété d’un On objet ne peut pas être représentée par une seule chaîne, vous pouvez définir des éléments de propriété pour celui-ci.

Pour plus d’informations, consultez Personnaliser l’apparence de l’interface utilisateur en fonction de la plateforme.

Étapes suivantes

Les extensions de balisage XAML .NET MAUI permettent aux propriétés d’être définies sur des objets ou des valeurs référencés indirectement à partir d’autres sources. Les extensions de balisage XAML sont particulièrement importantes pour le partage d’objets et le référencement des constantes utilisées dans une application.

Extensions de balisage XAML