Ränder und Abstände

  • Artikel

Die Eigenschaften Margin und Padding steuern das Layoutverhalten, wenn ein Element in der Benutzeroberfläche gerendert wird. In diesem Artikel wird der Unterschied zwischen den beiden Eigenschaften und deren Festlegung veranschaulicht.

Übersicht

Rand und Auffüllung 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. MarginWerte 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 vom eigenen Inhalt zu trennen. Padding Werte können für Layoutklassen angegeben werden.

Das folgende Diagramm veranschaulicht die beiden Konzepte:

Ränder und Auffüllungskonzepte

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

Angeben einer Stärke

Die Margin Eigenschaften und Padding sind 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 wird. 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 angewendet, wobei der vertikale Wert symmetrisch auf die obere und untere Seite des Elements angewendet wird.
  • Erstellen Sie eine Thickness Struktur, die durch vier unterschiedliche 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, wodurch der Inhalt in der Regel überzeichnet oder überzeichnet wird.

Zusammenfassung

In diesem Artikel wurde der Unterschied zwischen den Margin Eigenschaften und Padding und deren Festlegung veranschaulicht. Die Eigenschaften steuern das Layoutverhalten, wenn ein Element in der Benutzeroberfläche gerendert wird.