Aligner et positionner les contrôles MAUI .NET

Chaque contrôle d’interface utilisateur d’application multiplateforme .NET (.NET MAUI) qui dérive de View, qui inclut des vues et des dispositions, possède HorizontalOptions et VerticalOptions propriétés, de type LayoutOptions. La LayoutOptions structure encapsule l’alignement préféré d’une vue, qui détermine sa position et sa taille dans sa disposition parente lorsque la disposition parente contient un espace inutilisé (autrement dit, la disposition parente est supérieure à la taille combinée de tous ses enfants).

En outre, les Margin contrôles de position et Padding de propriétés par rapport aux contrôles adjacents ou enfants. Pour plus d’informations, consultez Contrôles position.

Aligner les vues dans les dispositions

L’alignement d’un View, par rapport à son parent, peut être contrôlé en définissant l’ou VerticalOptions la propriété de l’un HorizontalOptionsView des champs publics de la LayoutOptions structure. Les champs publics sont tels que Start, , CenterEnd, et Fill.

Les Startchamps et EndFill les champs Centersont utilisés pour définir l’alignement de la vue dans la disposition parente :

• Pour l’alignement horizontal, Start positionne le View côté gauche de la disposition parente et, pour l’alignement vertical, il positionne View le haut de la disposition parente.
• Pour l’alignement horizontal et vertical, Center horizontalement ou verticalement centre le View.
• Pour l’alignement horizontal, End positionne le View côté droit de la disposition parente et, pour l’alignement vertical, il positionne le View bas de la disposition parente.
• Pour l’alignement horizontal, Fill vérifie que la View largeur de la disposition parente et l’alignement vertical, elle garantit que la View hauteur de la disposition parente est remplie.

Remarque

La valeur par défaut des propriétés HorizontalOptions et VerticalOptions d’un affichage est LayoutOptions.Fill.

Un StackLayout seul respect est le Start, Center, Endet FillLayoutOptions les champs sur les vues enfants qui se trouvent dans la direction opposée à l’orientation StackLayout . Par conséquent, les vues enfants dans une orientation StackLayout verticale peuvent définir leurs HorizontalOptions propriétés sur l’un Startdes champs , Centerou EndFill champs. De même, les vues enfants dans une orientation horizontale StackLayout peuvent définir leurs VerticalOptions propriétés sur l’un Startdes champs , Centerou EndFill champs.

A StackLayout ne respecte pas les Startvues CenterLayoutOptionsEndFillenfants qui sont dans la même direction que l’orientation.StackLayout Par conséquent, une orientation StackLayout verticale ignore les Startchamps , Centerou EndFill les champs s’ils sont définis sur les VerticalOptions propriétés des vues enfants. De même, une orientation StackLayout horizontale ignore les Startchamps , Centerou EndFill les champs s’ils sont définis sur les HorizontalOptions propriétés des vues enfants.

Important

LayoutOptions.Fillremplace généralement les demandes de taille spécifiées à l’aide des propriétés et WidthRequest des HeightRequest propriétés.

L’exemple XAML suivant illustre une orientation StackLayout verticale où chaque enfant Label définit sa HorizontalOptions propriété sur l’un des quatre champs d’alignement de la LayoutOptions structure :

<StackLayout>
  ...
  <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>

La capture d’écran suivante montre l’alignement obtenu de chacun d’eux Label:

Contrôles de position

Contrôles Margin de position et Padding de position des propriétés par rapport aux contrôles adjacents ou enfants. Les marges et le remplissage sont des concepts de disposition connexes :

• La Margin propriété représente la distance entre un élément et ses éléments adjacents, et est utilisée pour contrôler la position de rendu de l’élément et la position de rendu de ses voisins. Margin les valeurs peuvent être spécifiées sur les dispositions et les vues.
• La Padding propriété représente la distance entre un élément et ses éléments enfants et est utilisée pour séparer le contrôle de son propre contenu. Padding les valeurs peuvent être spécifiées sur les pages, les mises en page et les vues.

Le diagramme suivant illustre les deux concepts :

Remarque

Margin les valeurs sont additifs. Par conséquent, si deux éléments adjacents spécifient une marge de 20 unités indépendantes de l’appareil, la distance entre les éléments sera de 40 unités indépendantes de l’appareil. En outre, les valeurs de marge et de remplissage sont additifs lorsque les deux sont appliquées, dans la mesure où la distance entre un élément et tout contenu sera la marge plus le remplissage.

Les Margin propriétés et Padding les propriétés sont de type Thickness. Il existe trois possibilités lors de la création d’une Thickness structure :

• Créez une Thickness structure définie par une valeur uniforme unique. La valeur unique est appliquée aux côtés gauche, supérieur, droit et inférieur de l’élément.
• Créez une Thickness structure définie par des valeurs horizontales et verticales. La valeur horizontale est symétriement appliquée aux côtés gauche et droit de l’élément, avec la valeur verticale appliquée de manière symétrique aux côtés supérieur et inférieur de l’élément.
• Créez une Thickness structure définie par quatre valeurs distinctes appliquées aux côtés gauche, supérieur, droit et inférieur de l’élément.

L’exemple XAML suivant montre les trois possibilités suivantes :

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Le code C# équivalent est :

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });  

Remarque

Thickness les valeurs peuvent être négatives, ce qui est généralement des clips ou sursinit le contenu.