Xamarin.Forms StackLayout

Article
07/13/2023

Un StackLayout organise les vues enfants dans une pile unidimensionnelle, horizontalement ou verticalement. Par défaut, une StackLayout est orientée verticalement. En outre, un StackLayout peut être utilisé comme disposition parente qui contient d’autres dispositions enfants.

La StackLayout classe définit les propriétés suivantes :

Orientation, de type StackOrientation, représente la direction dans laquelle les vues enfants sont positionnées. La valeur par défaut de cette propriété est Vertical.
Spacing, de type double, indique la quantité d’espace entre chaque vue enfant. La valeur par défaut de cette propriété est six unités indépendantes de l’appareil.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données et stylées.

La StackLayout classe dérive de la Layout<T> classe, qui définit une Children propriété de type IList<T>. La Children propriété est le ContentProperty de la Layout<T> classe et n’a donc pas besoin d’être définie explicitement à partir de XAML.

Conseil

Pour obtenir les meilleures performances de disposition possibles, suivez les instructions de la page Optimiser les performances de la disposition.

Orientation verticale

Le code XAML suivant montre comment créer une vue verticale qui StackLayout contient différentes vues enfants :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage"
             Title="Vertical StackLayout demo">
    <StackLayout Margin="20">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Cet exemple crée un objet et BoxView contenant Label verticalStackLayout. Par défaut, il existe six unités d’espace indépendantes de l’appareil entre les vues enfants :

Le code C# équivalent est :

public class VerticalStackLayoutPageCS : ContentPage
{
    public VerticalStackLayoutPageCS()
    {
        Title = "Vertical StackLayout demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

Notes

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 la page Marge et remplissage.

Orientation horizontale

Le code XAML suivant montre comment créer un objet orienté StackLayout horizontalement en définissant sa Orientation propriété sur Horizontal:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage"
             Title="Horizontal StackLayout demo">
    <StackLayout Margin="20"
                 Orientation="Horizontal"
                 HorizontalOptions="Center">
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Cet exemple crée un objet horizontal StackLayout contenant BoxView des objets, avec six unités d’espace indépendantes de l’appareil entre les vues enfants :

Le code C# équivalent est :

public HorizontalStackLayoutPageCS()
{
    Title = "Horizontal StackLayout demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Center,
        Children =
        {
            new BoxView { Color = Color.Red },
            new BoxView { Color = Color.Yellow },
            new BoxView { Color = Color.Blue },
            new BoxView { Color = Color.Green },
            new BoxView { Color = Color.Orange },
            new BoxView { Color = Color.Purple }
        }
    };
}

Espace entre les vues enfants

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.StackLayoutSpacingPage"
             Title="StackLayout Spacing demo">
    <StackLayout Margin="20"
                 Spacing="0">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Cet exemple crée un objet LabelBoxView et contenant vertical StackLayout qui n’a pas d’espacement entre eux :

Conseil

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

Le code C# équivalent est :

public class StackLayoutSpacingPageCS : ContentPage
{
    public StackLayoutSpacingPageCS()
    {
        Title = "StackLayout Spacing demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Spacing = 0,
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

Position et taille des vues enfants

La taille et la position des vues enfants dans un StackLayout dépendent des valeurs des vues enfants et WidthRequest des HeightRequest propriétés, ainsi que des valeurs de leurs HorizontalOptions propriétés et VerticalOptions . Dans une verticale StackLayout, les vues enfants se développent pour remplir la largeur disponible lorsque leur taille n’est pas définie explicitement. De même, dans une vue horizontale StackLayout, les vues enfants se développent pour remplir la hauteur disponible lorsque leur taille n’est pas définie explicitement.

Les HorizontalOptions propriétés et VerticalOptions d’une StackLayoutvue enfant peuvent être définies sur les champs du LayoutOptions struct, qui encapsule deux préférences de disposition :

L’alignement détermine la position et la taille d’une vue enfant dans sa disposition parente.
L’extension indique si la vue enfant doit utiliser un espace supplémentaire, s’il est disponible.

Conseil

Ne définissez pas les HorizontalOptions propriétés et VerticalOptions d’un StackLayout , sauf si vous en avez besoin. Les valeurs par défaut de LayoutOptions.Fill et LayoutOptions.FillAndExpand permettent la meilleure optimisation de la disposition. La modification de ces propriétés a un coût et consomme de la mémoire, même lorsque vous les réédiez aux valeurs par défaut.

Alignment

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.AlignmentPage"
             Title="Alignment demo">
    <StackLayout Margin="20">
        <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" />
    </StackLayout>
</ContentPage>

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

Un StackLayout respecte uniquement les préférences d’alignement sur les vues enfants qui se trouvent dans la direction opposée à l’orientation StackLayout. Par conséquent, les vues enfants Label dans StackLayout orienté verticalement définissent leurs propriétés HorizontalOptions sur l’un des champs d’alignement :

Start, qui positionne le Label sur le côté gauche du StackLayout.
Center, qui centre Label dans StackLayout.
End, qui positionne le Label sur le côté droit du StackLayout.
Fill, qui garantit que Label remplit la largeur de StackLayout.

Le code C# équivalent est :

public class AlignmentPageCS : ContentPage
{
    public AlignmentPageCS()
    {
        Title = "Alignment demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
                new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
                new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
                new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
            }
        };
    }
}

Expansion

L’exemple XAML suivant définit des préférences d’extension sur chacune Label d’elles dans :StackLayout

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.ExpansionPage"
             Title="Expansion demo">
    <StackLayout Margin="20">
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="StartAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="CenterAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="EndAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
    </StackLayout>
</ContentPage>

Dans cet exemple, les préférences d’expansion sont définies sur les Label objets pour contrôler leur taille dans .StackLayout Les StartAndExpandchamps , CenterAndExpand, EndAndExpandet FillAndExpand sont utilisés pour définir la préférence d’alignement et déterminer si le Label occupera plus d’espace s’il est disponible dans le parent StackLayout:

Un StackLayout peut uniquement développer les vues enfants dans le sens de son orientation. Par conséquent, le StackLayout orienté verticalement peut développer les vues enfants Label qui définissent leurs propriétés VerticalOptions sur l’un des champs d’extension. Cela signifie que, pour l’alignement vertical, chaque Label occupe la même quantité d’espace dans StackLayout. En revanche, seule la dernière instance Label, qui définit sa propriété VerticalOptions sur FillAndExpand a une taille différente.

Conseil

Lors de l’utilisation d’un StackLayout, vérifiez qu’une seule vue enfant est définie sur LayoutOptions.Expands. Cette propriété permet de garantir que l’enfant spécifié occupe le plus grand espace que l’élément StackLayout peut lui donner, et il est inutile d’effectuer ces calculs plusieurs fois.

Le code C# équivalent est :

public ExpansionPageCS()
{
    Title = "Expansion demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children =
        {
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
        }
    };
}

Important

Lorsque tout l’espace de StackLayout est utilisé, les préférences d’extension n’ont aucun effet.

Pour plus d’informations sur l’alignement et l’expansion, consultez Options de disposition dans Xamarin.Forms.

Objets StackLayout imbriqués

Un StackLayout peut être utilisé comme disposition parente qui contient des objets enfants StackLayout imbriqués ou d’autres dispositions enfants.

Le code XAML suivant montre un exemple d’imbrication d’objets StackLayout :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.CombinedStackLayoutPage"
             Title="Combined StackLayouts demo">
    <StackLayout Margin="20">
        ...
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red" />
                <Label Text="Red"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow" />
                <Label Text="Yellow"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue" />
                <Label Text="Blue"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        ...
    </StackLayout>
</ContentPage>

Dans cet exemple, le parent StackLayout contient des objets imbriqués StackLayout à l’intérieur d’objets Frame . Le parent StackLayout est orienté verticalement, tandis que les objets enfants StackLayout sont orientés horizontalement :

Important

Plus vous imbriquez StackLayout des objets et d’autres dispositions, plus les dispositions imbriquées auront un impact sur les performances. Pour plus d’informations, consultez Choisir la disposition appropriée.

Le code C# équivalent est :

public class CombinedStackLayoutPageCS : ContentPage
{
    public CombinedStackLayoutPageCS()
    {
        Title = "Combined StackLayouts demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Red },
                            new Label { Text = "Red", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Yellow },
                            new Label { Text = "Yellow", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Blue },
                            new Label { Text = "Blue", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                // ...
            }
        };
    }
}

Xamarin.Forms StackLayout

Orientation verticale

Orientation horizontale

Espace entre les vues enfants

Position et taille des vues enfants

Alignment

Expansion

Objets StackLayout imbriqués

Liens connexes

Ressources supplémentaires