Marge et remplissage
Les propriétés Margin et Padding contrôlent le comportement de disposition lorsqu’un élément est rendu dans l’interface utilisateur. Cet article montre la différence entre les deux propriétés et comment les définir.
Vue d’ensemble
La marge et le remplissage sont des concepts de disposition connexes :
- La
Margin
propriété 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.Margin
les valeurs peuvent être spécifiées sur les classes de disposition et d’affichage . - La
Padding
propriété 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.Padding
les valeurs peuvent être spécifiées sur les classes de disposition .
Le diagramme suivant illustre les deux concepts :
Notez que Margin
les valeurs sont additives. Par conséquent, si deux éléments adjacents spécifient une marge de 20 pixels, la distance entre les éléments sera de 40 pixels. En outre, la marge et le remplissage sont additifs lorsque les deux sont appliqués, car la distance entre un élément et tout contenu sera la marge plus remplissage.
Spécification d’une épaisseur
Les Margin
propriétés et Padding
sont de type Thickness
. Il existe trois possibilités lors de la création d’une Thickness
structure :
- Créez une
Thickness
structure 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éez une
Thickness
structure définie par des valeurs horizontales et verticales. La valeur horizontale est appliquée symétriquement aux côtés gauche et droit de l’élément, la valeur verticale étant appliquée symétriquement aux côtés supérieur et inférieur de l’élément. - Créez une
Thickness
structure 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 de code XAML suivant montre les trois possibilités :
<StackLayout Padding="0,20,0,0">
<Label Text="Xamarin.Forms" Margin="20" />
<Label Text="Xamarin.iOS" Margin="10, 15" />
<Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>
Le code C# équivalent est affiché dans l’exemple de code suivant :
var stackLayout = new StackLayout {
Padding = new Thickness(0,20,0,0),
Children = {
new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
}
};
Notes
Thickness
les valeurs peuvent être négatives, ce qui permet généralement de clipser ou de suressindérer le contenu.
Résumé
Cet article a montré la différence entre les Margin
propriétés et Padding
, et comment les définir. Les propriétés contrôlent le comportement de disposition lorsqu’un élément est rendu dans l’interface utilisateur.