Quelle est la différence entre LayoutOptions de Xamarin.Form, en particulier Fill et Expand?

Dans Xamarin.Forms, chaque View possède les deux propriétés HorizontalOptions et VerticalOptions . Les deux sont de type LayoutOptions et peuvent avoir l’une des valeurs suivantes:

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

Apparemment, il contrôle l’alignement de la vue sur la vue parent. Mais quel est le comportement de chaque option? Et quelle est la différence entre Fill et le suffixe Expand ?

Réponse courte

Start , Center , End et Fill définissent l’ alignement de la vue dans son espace .

Expand définit s’il occupe plus d’espace s’il est disponible.

Théorie

La structure LayoutOptions contrôle deux comportements distincts:

  1. Alignement: comment la vue est-elle alignée dans la vue parent?

    • Start : pour l’alignement vertical, la vue est déplacée vers le haut. Pour l’alignement horizontal, c’est généralement le côté gauche. (Mais notez que sur les appareils avec un réglage de la langue de droite à gauche, c’est l’inverse, c’est-à-dire aligné à droite.)
    • Center : la vue est centrée.
    • End : la vue est généralement alignée en bas ou à droite. (Sur les langues de droite à gauche, bien sûr, alignées à gauche.)
    • Fill : Cet alignement est légèrement différent. La vue s’étendra sur toute la taille de la vue parente.

    Si le parent, cependant, n’est pas plus grand que ses enfants, vous ne remarquerez aucune différence entre ces alignements. L’alignement ne concerne que les vues parentes avec un espace supplémentaire disponible.

  2. Expansion: L’élément occupera-t-il plus d’espace s’il est disponible?

    • Suffixe Expand : Si la vue parent est plus grande que la taille combinée de tous ses enfants, c.-à-d. Qu’un espace supplémentaire est disponible, l’espace est proportionné entre les vues enfants avec ce suffixe. Ces enfants vont “occuper” leur espace, mais ne le remplissent pas nécessairement. Nous allons examiner ce comportement dans l’exemple ci-dessous.
    • Pas de suffixe: les enfants sans suffixe Expand n’obtiendront pas d’espace supplémentaire, même si davantage d’espace est disponible.

    Encore une fois, si la vue parent n’est pas plus grande que ses enfants, le suffixe d’extension ne fait aucune différence également.

Exemple

Examinons l’exemple suivant pour voir la différence entre les huit options de mise en page.

L’application contient un StackLayout gris StackLayout avec huit boutons blancs nesteds, chacun portant son option de disposition verticale. En cliquant sur l’un des boutons, il assigne son option de disposition verticale à la disposition de la stack. De cette façon, nous pouvons facilement tester l’interaction des vues avec les parents, avec des options de mise en page différentes.

(Les dernières lignes de code ajoutent des cases jaunes supplémentaires. Nous y reviendrons dans un instant.)

 public static class App { static readonly StackLayout stackLayout = new StackLayout { BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.Start, Spacing = 2, Padding = 2, }; public static Page GetMainPage() { AddButton("Start", LayoutOptions.Start); AddButton("Center", LayoutOptions.Center); AddButton("End", LayoutOptions.End); AddButton("Fill", LayoutOptions.Fill); AddButton("StartAndExpand", LayoutOptions.StartAndExpand); AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand); AddButton("EndAndExpand", LayoutOptions.EndAndExpand); AddButton("FillAndExpand", LayoutOptions.FillAndExpand); return new NavigationPage(new ContentPage { Content = stackLayout, }); } static void AddButton(ssortingng text, LayoutOptions verticalOptions) { stackLayout.Children.Add(new Button { Text = text, BackgroundColor = Color.White, VerticalOptions = verticalOptions, HeightRequest = 20, Command = new Command(() => { stackLayout.VerticalOptions = verticalOptions; (stackLayout.ParentView as Page).Title = "StackLayout: " + text; }), }); stackLayout.Children.Add(new BoxView { HeightRequest = 1, Color = Color.Yellow, }); } } 

Les captures d’écran suivantes montrent le résultat en cliquant sur chacun des huit boutons. Nous faisons les observations suivantes:

  • Tant que la stackLayout est serrée (ne remplit pas la page), l’option de mise en page verticale de chaque Button est négligeable.
  • L’option de disposition verticale importe uniquement si la stackLayout est plus grande (par exemple, via l’alignement de Fill ) et que les boutons individuels ont le suffixe Expand .
  • Un espace supplémentaire est éventuellement proportionné parmi tous les boutons avec le suffixe Expand . Pour voir cela plus clairement, nous avons ajouté des lignes horizontales jaunes entre deux boutons voisins.
  • Les boutons avec plus d’espace que la hauteur demandée ne le remplissent pas nécessairement. Dans ce cas, le comportement réel est contrôlé par leur alignement. Par exemple, ils sont alignés sur le dessus, le centre ou le bouton de leur espace ou le remplissent complètement.
  • Tous les boutons couvrent toute la largeur de la mise en page, car nous ne modifions que les VerticalOptions .

Captures d'écran

Vous trouvez ici les captures d’écran haute résolution correspondantes.

Il y a un petit bogue dans la version actuelle de Xamarin.Forms; peut-être y a-t-il eu un moment.

CenterAndExpand ne CenterAndExpand généralement pas et il peut être difficile de contourner ce CenterAndExpand .

Par exemple, si vous avez un StackLayout défini sur CenterAndExpand , vous mettez une étiquette à l’intérieur de celle-ci également définie sur CenterAndExpand vous vous attendez à ce qu’une étiquette soit pleine largeur de StackLayout . Nan. Il ne s’agrandira pas. Vous devez définir StackLayout sur ” FillAndExpand ” pour que l’object Label nested se développe sur toute la largeur de StackLayout , puis indiquez à Label de centrer le texte, pas lui-même en tant qu’object, avec HorizontalTextAlignment="Center" . D’après mon expérience, le parent et l’enfant nested doivent être définis sur FillAndExpand si vous voulez vraiment vous assurer qu’il s’agrandit.