Options de disposition dans Xamarin.Forms

Télécharger l’exemple

Chaque Xamarin.Forms vue a des propriétés HorizontalOptions et VerticalOptions, de type LayoutOptions. Cet article explique l’effet de chaque valeur LayoutOptions sur l’alignement et l’expansion d’une vue.

Vue d’ensemble

La LayoutOptions structure encapsule deux préférences de disposition :

• Alignement : alignement préféré de la vue, qui détermine sa position et sa taille dans sa disposition parente.
• Extension : utilisée uniquement par un StackLayout, et indique si la vue doit utiliser un espace supplémentaire, s’il est disponible.

Ces préférences de disposition peuvent être appliquées à un View, par rapport à son parent, en définissant la HorizontalOptions propriété ou VerticalOptions de sur View l’un des champs publics de la LayoutOptions structure. Les champs publics sont les suivants :

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

Les Startchamps , Center, Endet 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 le View en haut de la disposition parente.
• Pour l’alignement horizontal et vertical, Center centre horizontalement ou verticalement 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 le View en bas 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, il garantit que le View remplit la hauteur de la disposition parente.

Les StartAndExpandvaleurs , CenterAndExpand, EndAndExpandet FillAndExpand sont utilisées pour définir la préférence d’alignement et si la vue occupera plus d’espace si disponible dans le parent StackLayout.

Notes

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

Alignment

L’alignement contrôle la position d’une vue dans sa disposition parente lorsque la disposition parente contient de l’espace inutilisé (autrement dit, la disposition parente est plus grande que la taille combinée de tous ses enfants).

A StackLayout respecte uniquement les Startchamps , Center, Endet FillLayoutOptions sur les vues enfants qui se trouvent dans la direction opposée à l’orientation StackLayout . Par conséquent, les vues enfants au sein d’une vue StackLayout verticale peuvent définir leurs HorizontalOptions propriétés sur l’un Startdes champs , Center, Endou Fill . De même, les vues enfants au sein d’un objet orienté StackLayout horizontalement peuvent définir leurs VerticalOptions propriétés sur l’un Startdes champs , Center, Endou Fill .

A StackLayout ne respecte pas les Startchamps , Center, Endet FillLayoutOptions sur les vues enfants qui sont dans la même direction que l’orientation StackLayout . Par conséquent, une orientation StackLayout verticale ignore les Startchamps , Center, Endou Fill s’ils sont définis sur les VerticalOptions propriétés des vues enfants. De même, un objet orienté StackLayout horizontalement ignore les Startchamps , Center, Endou Fill s’ils sont définis sur les HorizontalOptions propriétés des vues enfants.

Notes

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

L’exemple de code 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 Margin="0,20,0,0">
  ...
  <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>

Le code C# équivalent est illustré ci-dessous :

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  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 }
  }
};

Le code aboutit à la disposition illustrée dans les captures d’écran suivantes :

Expansion

L’extension contrôle si une vue occupera plus d’espace, le cas échéant, dans un StackLayout. Si le contient de l’espace StackLayout inutilisé (autrement dit, est StackLayout plus grand que la taille combinée de tous ses enfants), l’espace inutilisé est partagé de manière égale par toutes les vues enfants qui demandent une expansion en définissant leurs HorizontalOptions propriétés ou VerticalOptions sur un LayoutOptions champ qui utilise le AndExpand suffixe. Notez que lorsque tout l’espace dans le StackLayout est utilisé, les options d’expansion n’ont aucun effet.

Un StackLayout peut uniquement développer les vues enfants dans le sens de son orientation. Par conséquent, une vue StackLayout verticale peut développer des vues enfants qui définissent leurs VerticalOptions propriétés sur l’un StartAndExpanddes champs , CenterAndExpand, EndAndExpandou FillAndExpand , si le contient de l’espace StackLayout inutilisé. De même, une vue orientée StackLayout horizontalement peut développer des vues enfants qui définissent leurs HorizontalOptions propriétés sur l’un StartAndExpanddes champs , CenterAndExpand, EndAndExpandou FillAndExpand , si le contient de l’espace StackLayout inutilisé.

Un StackLayout ne peut pas développer les vues enfants dans la direction opposée à son orientation. Par conséquent, sur une vue StackLayoutverticale, la définition de la HorizontalOptions propriété sur une vue StartAndExpand enfant a le même effet que la définition de la propriété sur Start.

Notes

Notez que l’activation de l’extension ne modifie pas la taille d’une vue, sauf si elle utilise LayoutOptions.FillAndExpand.

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

<StackLayout Margin="0,20,0,0">
  ...
  <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>

Le code C# équivalent est illustré ci-dessous :

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  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 }
  }
};

Le code aboutit à la disposition illustrée dans les captures d’écran suivantes :

Chacun 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. En outre, chacune Label est séparée par un petit rouge BoxView, ce qui permet de visualiser facilement l’espace Label occupé.

Résumé

Cet article explique l’effet de chaque LayoutOptions valeur de structure sur l’alignement et l’expansion d’une vue, par rapport à son parent. Les Startchamps , Center, Endet Fill sont utilisés pour définir l’alignement de la vue dans la disposition parente, et les StartAndExpandchamps , CenterAndExpandEndAndExpandet FillAndExpand sont utilisés pour définir la préférence d’alignement et pour déterminer si la vue occupera plus d’espace, le cas échéant, dans un StackLayout.

Liens associés

• LayoutOptions (exemple)
• LayoutOptions