Freigeben über

Rand und Abstand

  • Artikel

Das Layoutverhalten der Eigenschaften Margin and Padding steuert, wenn ein Element auf der Benutzeroberfläche gerendert wird. In diesem Artikel wird der Unterschied zwischen den beiden Eigenschaften und deren Festlegung veranschaulicht.

Übersicht

Rand- und Abstandskonzepte sind verwandte Layoutkonzepte:

  • Die Margin-Eigenschaft stellt den Abstand zwischen einem Element und seinen angrenzenden Elementen dar und wird verwendet, um die Renderingposition des Elements und die Renderingposition seiner Nachbarn zu steuern. Margin Werte können für Layout- und Ansichtsklassen angegeben werden.
  • Die Padding-Eigenschaft stellt den Abstand zwischen einem Element und seinen untergeordneten Elementen dar und wird verwendet, um das Steuerelement von seinem eigenen Inhalt zu trennen. Padding Werte können für Layoutklassen angegeben werden.

Das folgende Diagramm veranschaulicht diese beiden Konzepte:

Ränder und Abstandskonzepte

Beachten Sie, dass Margin Werte additiv sind. Wenn also zwei benachbarte Elemente einen Rand von 20 Pixeln angeben, beträgt der Abstand zwischen den Elementen 40 Pixel. Darüber hinaus sind Rand und Abstand additiv, wenn beide angewendet werden, da der Abstand zwischen einem Element und jedem Inhalt der Rand plus Abstand ist.

Angeben einer Stärke

Die Eigenschaften Margin und Padding sind beide vom Typ Thickness. Beim Erstellen einer Thickness-Struktur gibt es drei Möglichkeiten:

  • Erstellen Sie eine Thickness-Struktur, die durch einen einzelnen einheitlichen Wert definiert ist. Der einzelne Wert wird auf die linke, obere, rechte und untere Seite des Elements angewendet.
  • Erstellen Sie eine Thickness-Struktur, die durch horizontale und vertikale Werte definiert ist. Der horizontale Wert wird symmetrisch auf die linke und rechte Seite des Elements angewandt, während der vertikale Wert symmetrisch auf die obere und untere Seite des Elements angewandt wird.
  • Erstellen Sie eine Thickness-Struktur, die durch vier verschiedene Werte definiert ist, die auf die linke, obere, rechte und untere Seite des Elements angewendet werden.

Das folgende XAML-Codebeispiel zeigt alle drei Möglichkeiten:

<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>

Der äquivalente C#-Code ist im folgenden Codebeispiel zu sehen:

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) }
  }
};

Hinweis

Thickness-Werte können negativ sein, was den Inhalt in der Regel ausklammert oder überzeichnet.

Zusammenfassung

In diesem Artikel wurde der Unterschied zwischen den Eigenschaften und Padding den Margin Eigenschaften und deren Festlegung erläutert. Das Layoutverhalten der Eigenschaften steuert, wenn ein Element auf der Benutzeroberfläche gerendert wird.