Marge et remplissage

  • Article

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 :

remplissage Marges et concepts de remplissage

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.