Partager via

Aligner et positionner les contrôles .NET MAUI

  • Article

Chaque contrôle d’interface utilisateur d’application multiplateforme .NET (.NET MAUI) qui dérive de View, qui inclut des vues et des dispositions, a des propriétés HorizontalOptions et VerticalOptions, de type LayoutOptions. La structure LayoutOptions 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 plus grande que la taille combinée de tous ses enfants).

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

Aligner les vues dans les dispositions

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

Les champs Start, Center, End et Fill sont utilisés pour définir l’alignement de la vue dans la disposition parente :

  • Pour l’alignement horizontal, Start positionne le View sur le côté gauche de la disposition parente et, pour l’alignement vertical, il positionne View en 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 sur le côté droit de la disposition parente et, pour l’alignement vertical, il positionne View en haut de la disposition parente.
  • Pour l’alignement horizontal, Fill vérifie que le View remplit la largeur de la disposition parente et, pour l’alignement vertical, elle garantit que View remplit la hauteur de la disposition parente.

Remarque

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

Une StackLayout respecte uniquement les champs Start, Center, End et Fill LayoutOptions sur les vues enfants qui sont dans la direction opposée à l’orientation StackLayout. Par conséquent, les vues enfants dans un StackLayout orienté verticalement peuvent définir leurs propriétés de HorizontalOptions sur l’un des champs Start, Center, End ou Fill. Et de façon similaire, les vues enfants dans un StackLayout orienté horizontalement peuvent définir leurs propriétés de VerticalOptions sur l’un des champs Start, Center, End ou Fill.

Une StackLayout ne respecte pas les champs Start, Center, End et Fill LayoutOptions des vues enfants dans la même direction que l’orientation StackLayout. Par conséquent, une orientation verticale de StackLayout ignore les champs Start,Center ou EndFill s’ils sont définis sur les VerticalOptions propriétés des vues enfants. Et de façon similaire, une orientation horizontale de StackLayout ignore les champs Start,Center ou EndFill s’ils sont définis sur les HorizontalOptions propriétés des vues enfants.

Important

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

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

<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 résultant de chaque Label :

Capture d’écran des options de disposition d’alignement.

Positionner les contrôles

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

  • La propriété Margin 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. Les valeurs Margin peuvent être spécifiées sur les dispositions et les vues.
  • La propriété Padding 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. Les valeurs Padding peuvent être spécifiées sur les pages, les dispositions et les vues.

Le diagramme suivant illustre les deux concepts :

Concepts de marge et de remplissage.

Remarque

Les valeurs Margin sont additives. 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 additives 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 propriétés Margin et Padding sont toutes deux de type Thickness. Il existe trois possibilités lors de la création d’une structure Thickness :

  • Créer une structure Thickness 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éer une structure Thickness définie par des valeurs horizontales et verticales. La valeur horizontale est appliquée de manière symétrique aux côtés gauche et droit de l’élément, et la valeur verticale est appliquée de manière symétrique aux côtés supérieur et inférieur de l’élément.
  • Créer une structure Thickness 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 :

<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

Les valeurs Thickness peuvent être négatives, ce qui entraîne généralement un rognage ou une surdimension du contenu.