Réponse courte
Start, Center, EndEt Filldéfinir de la vue de l' alignement dans son espace .
Expanddéfinit s'il occupe plus d'espace s'il est disponible.
Théorie
La structure LayoutOptionscontrôle deux comportements distincts:
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, il s'agit généralement du côté gauche. (Mais notez que sur les appareils avec un réglage de 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. (Dans les langues de droite à gauche, bien sûr, aligné à gauche.)Fill: Cet alignement est légèrement différent. La vue s'étendra sur toute la taille de la vue parent.
Si le parent, cependant, n'est pas plus grand que ses enfants, vous ne remarquerez aucune différence entre ces alignements. L'alignement n'a d'importance que pour les vues parent avec un espace supplémentaire disponible.
Expansion: l'élément occupera-t-il plus d'espace s'il est disponible?
- Suffixe
Expand: Si la vue parente est plus grande que la taille combinée de tous ses enfants, c'est-à-dire qu'un espace supplémentaire est disponible, alors l'espace est proportionné entre les vues enfants avec ce suffixe. Ces enfants «occuperont» leur espace, mais ne le «rempliront» pas nécessairement. Nous examinerons ce comportement dans l'exemple ci-dessous.
- Pas de suffixe: les enfants sans
Expandsuffixe n'obtiendront pas d'espace supplémentaire, même si plus d'espace est disponible.
Encore une fois, si la vue parente n'est pas plus grande que ses enfants, le suffixe d'extension ne fait pas non plus de différence.
Exemple
Jetons un œil à l'exemple suivant pour voir la différence entre les huit options de mise en page.
L'application contient un gris foncé StackLayoutavec huit boutons blancs imbriqués, chacun d'eux étant étiqueté avec son option de disposition verticale. En cliquant sur l'un des boutons, il assigne son option de disposition verticale à la disposition de la pile. De cette façon, nous pouvons facilement tester l'interaction des vues avec les parents, les deux avec une option de mise en page différente.
(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(string 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 le parent
stackLayoutest serré (pas Fillla page), l'option de mise en page verticale de chacun Buttonest négligeable.
- L'option de disposition verticale n'a d'importance que si le
stackLayoutest plus grand (par exemple via l' Fillalignement) et que les boutons individuels ont le Expandsuffixe.
- L'espace supplémentaire est éventuellement proportionné entre tous les boutons avec
Expandsuffixe. Pour voir cela plus clairement, nous avons ajouté des lignes horizontales jaunes entre tous les deux boutons voisins.
- Les boutons avec plus d'espace que leur 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 soit alignés en haut, au centre ou en bouton de leur espace, soit le remplissent complètement.
- Tous les boutons s'étendent sur toute la largeur de la mise en page, car nous ne modifions que le
VerticalOptions.
Vous trouverez ici les captures d'écran haute résolution correspondantes.
