VerticalStackLayout

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) VerticalStackLayout organise les vues enfants dans une pile verticale unidimensionnelle et constitue une alternative plus performante à un StackLayout. En outre, une VerticalStackLayout peut être utilisée comme disposition parente contenant d'autres dispositions enfants.

VerticalStackLayout définit les propriétés suivantes :

  • Spacing, de type double, indique la quantité d’espace entre chaque vue enfant. La valeur par défaut de cette propriété est 0.

Cette propriété est assistée par un objet BindableProperty, ce qui signifie qu'elle peut être la cible de liaisons de données et peut être stylisée.

Le code XAML suivant montre comment créer un VerticalStackLayout qui contient différents affichages enfants :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

Cet exemple crée un VerticalStackLayout contenant des objets Label et Rectangle. Par défaut, il n’existe aucun espace entre les vues enfants :

Capture d'écran de VerticalStackLayout affichant différentes vues enfants.

Note

La valeur de la Margin propriété représente la distance entre un élément et ses éléments adjacents. Pour plus d’informations, consultez Contrôles position.

Espace entre les vues enfants

L’espacement entre les vues enfants dans un VerticalStackLayout peut être modifié en définissant la propriété Spacing sur une valeur double :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

Cet exemple crée un conteneur VerticalStackLayout contenant les objets Label et Rectangle qui ont dix unités indépendantes de l’appareil d’espace entre les vues enfants :

VerticalStackLayout affichant différentes vues enfants avec espacement illustré par une capture d'écran.

Conseil / Astuce

La Spacing propriété peut être définie sur des valeurs négatives pour que les vues enfants se chevauchent.

Positionner et dimensionner les affichages enfants

La taille et la position des vues enfants dans un VerticalStackLayout dépendent des valeurs des propriétés HeightRequest et WidthRequest des vues enfants, ainsi que des valeurs de leurs propriétés HorizontalOptions. Dans un VerticalStackLayout, les vues enfants se développent pour remplir la largeur disponible lorsque leur taille n’est pas définie explicitement.

Les HorizontalOptions propriétés d’un VerticalStackLayout et de ses vues enfant peuvent être définies en fonction des champs de la structure LayoutOptions qui encapsule une préférence d’alignement de disposition. Cette préférence de disposition détermine la position et la taille d’une vue enfant dans sa disposition parente.

Conseil / Astuce

Ne définissez pas la HorizontalOptions propriété d’un VerticalStackLayout , sauf si vous avez besoin de le faire. La valeur par défaut de LayoutOptions.Fill permet la meilleure optimisation de la disposition. La modification de cette propriété a un coût et consomme de la mémoire, même lors de sa définition sur sa valeur par défaut.

L’exemple XAML suivant définit les préférences d’alignement sur chaque vue enfant dans le VerticalStackLayout :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
        <Label Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ContentPage>

Dans cet exemple, les préférences d’alignement sont définies sur les Label objets pour contrôler leur position dans le VerticalStackLayout. Les champs Start, Center, End et Fill sont utilisés pour définir l’alignement des objets Label dans le parent VerticalStackLayout:

Capture d’écran présentant VerticalStackLayout avec les vues enfants alignées.

Un VerticalStackLayout respecte uniquement les préférences d'alignement des vues enfant qui se trouvent dans la direction opposée à l'orientation de la mise en page. Par conséquent, les Label vues enfants dans le VerticalStackLayout définissent leurs propriétés HorizontalOptions sur l’un des champs d’alignement :

Objets Nest VerticalStackLayout

Vous pouvez utiliser un VerticalStackLayout comme mise en page parente qui contient d’autres mises en page enfants imbriquées.

Le code XAML suivant montre un exemple d’imbrication d’objets HorizontalStackLayout dans un VerticalStackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
    </VerticalStackLayout>
</ContentPage>

Dans cet exemple, le parent VerticalStackLayout contient des objets imbriqués HorizontalStackLayout à l’intérieur d’objets Border :

Capture d’écran affichant des objets HorizontalStackLayout imbriqués dans un VerticalStackLayout.

Important

Plus vous imbriquez les objets de mise en page, plus les calculs de mise en page seront effectués, ce qui peut avoir un impact sur les performances. Pour plus d’informations, consultez Choisir la disposition appropriée.

  • Dernière mise à jour :