Options de disposition dans Xamarin.Forms
Chaque Xamarin.Forms vue a des propriétés HorizontalOptions et VerticalOptions, de type LayoutOptions. Cet article explique l’effet que chaque valeur LayoutOptions a 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 l’affichage, qui détermine sa position et sa taille dans sa disposition parente.
- Expansion : utilisée uniquement par un , et indique si la vue doit utiliser un
StackLayout
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 l’ou VerticalOptions
la propriété de l’un HorizontalOptions
View
des champs publics de la LayoutOptions
structure. Les champs publics sont les suivants :
Les Start
champs et End
Fill
les champs Center
sont utilisés pour définir l’alignement de la vue dans la disposition parente :
- Pour l’alignement horizontal,
Start
positionne leView
côté gauche de la disposition parente et, pour l’alignement vertical, il positionneView
le haut de la disposition parente. - Pour l’alignement horizontal et vertical,
Center
horizontalement ou verticalement centre leView
. - Pour l’alignement horizontal,
End
positionne leView
côté droit de la disposition parente et, pour l’alignement vertical, il positionne leView
bas de la disposition parente. - Pour l’alignement horizontal,
Fill
vérifie que laView
largeur de la disposition parente et l’alignement vertical, elle garantit que laView
hauteur de la disposition parente est remplie.
Les StartAndExpand
valeurs , et EndAndExpand
FillAndExpand
les CenterAndExpand
valeurs 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
.
Remarque
La valeur par défaut des propriétés HorizontalOptions
et VerticalOptions
d’un affichage est LayoutOptions.Fill
.
Alignment
L’alignement contrôle la position d’une vue 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).
Un StackLayout
seul respect est le Start
, Center
, End
et Fill
LayoutOptions
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 Start
des champs , Center
ou End
Fill
champs. De même, les vues enfants dans une orientation horizontale StackLayout
peuvent définir leurs VerticalOptions
propriétés sur l’un Start
des champs , Center
ou End
Fill
champs.
A StackLayout
ne respecte pas les Start
vues Center
LayoutOptions
End
Fill
enfants qui sont dans la même direction que l’orientation.StackLayout
Par conséquent, une orientation StackLayout
verticale ignore les Start
champs , Center
ou End
Fill
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 Start
champs , Center
ou End
Fill
les champs s’ils sont définis sur les HorizontalOptions
propriétés des vues enfants.
Remarque
LayoutOptions.Fill
remplace 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 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 génère la disposition indiqué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 l’espace StackLayout
contient un espace inutilisé (autrement dit, supérieur StackLayout
à la taille combinée de tous ses enfants), l’espace inutilisé est partagé de façon égale par toutes les vues enfants qui demandent l’expansion en définissant leurs propriétés ou VerticalOptions
leurs HorizontalOptions
propriétés sur un LayoutOptions
champ qui utilise le AndExpand
suffixe. Notez que lorsque tout l’espace dans le fichier StackLayout
est utilisé, les options d’expansion n’ont aucun effet.
Un StackLayout
peut uniquement développer les affichages enfants dans le sens de son orientation. Par conséquent, une vue StackLayout
orientée verticalement peut développer des vues enfants qui définissent leurs VerticalOptions
propriétés sur l’un StartAndExpand
des champs, CenterAndExpand
EndAndExpand
ou FillAndExpand
l’un des champs, si l’espace StackLayout
inutilisé est contenu. De même, un affichage orienté horizontalement StackLayout
peut développer des vues enfants qui définissent leurs HorizontalOptions
propriétés sur l’un StartAndExpand
des champs, CenterAndExpand
EndAndExpand
ou FillAndExpand
l’un des champs, si l’espace StackLayout
est inutilisé.
Impossible StackLayout
de développer les vues enfants dans la direction opposée à son orientation. Par conséquent, sur une orientation StackLayout
verticale, la définition de la HorizontalOptions
propriété sur une vue enfant a StartAndExpand
le même effet que la définition de la propriété Start
sur .
Remarque
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 génère la disposition indiquée dans les captures d’écran suivantes :
Chacun Label
occupe la même quantité d’espace dans le 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, chacun Label
est séparé par un petit rouge BoxView
, ce qui permet à l’espace Label
occupé d’être facilement consulté.
Résumé
Cet article a expliqué l’effet que chaque LayoutOptions
valeur de structure a sur l’alignement et l’expansion d’une vue, par rapport à son parent. Les Start
champs , End
Center
et Fill
les champs sont utilisés pour définir l’alignement de la vue dans la disposition parente, et FillAndExpand
les EndAndExpand
StartAndExpand
CenterAndExpand
champs sont utilisés pour définir la préférence d’alignement, et pour déterminer si la vue occupera plus d’espace, si disponible, dans un .StackLayout