Ausrichtung, Rand, Abstand

  • Artikel

In XAML-Apps erben die meisten Ui-Elemente (User Interface) von der FrameworkElement-Klasse. Jedes FrameworkElement hat Eigenschaften für Dimensionen, Ausrichtung, Rand und Abstand, die das Layoutverhalten beeinflussen. Die folgende Anleitung gibt eine Übersicht über die Verwendung dieser Layouteigenschaften, um sicherzustellen, dass die Benutzeroberfläche deiner App in jedem Kontext lesbar und einfach zu bedienen ist.

Abmessungen (Höhe, Breite)

Die richtige Dimensionierung stellt sicher, dass alle Inhalte übersichtlich und lesbar sind. Benutzer sollten nicht scrollen oder zoomen müssen, um primäre Inhalte zu entziffern.

Diagramm zu Dimensionen

  • Height und Width geben die Größe eines Elements an. Die Standardwerte sind mathematisch NaN (Not a Number, keine Zahl). Du kannst feste Werte, die in effektiven Pixeln gemessen werden, oder eine automatische oder proportionale Größenanpassung verwenden.

  • ActualHeight und ActualWidth sind schreibgeschützte Eigenschaften, die die Größe eines Elements zur Laufzeit bereitstellen. Wenn dynamische Layouts wachsen oder schrumpfen, ändern sich die Werte in einem SizeChanged-Ereignis. Beachte, dass durch RenderTransform die Werte ActualHeight und ActualWidth nicht geändert werden.

  • MinWidth/MaxWidth und MinHeight/MaxHeight legen Werte fest, die die Größe eines Elements begrenzen, während weiterhin eine dynamische Größenanpassung möglich ist.

  • FontSize und andere Texteigenschaften steuern die Layoutgröße für Textelemente. Textelemente haben zwar keine explizit deklarierten Dimensionen, es werden jedoch trotzdem ActualWidth und ActualHeight berechnet.

Ausrichtung

Durch Ausrichtung erhält deine Benutzeroberfläche ein ordentliches, organisiertes und ausgewogenes Aussehen, und sie kann auch dazu verwendet werden, visuelle Hierarchien und Beziehungen aufzubauen.

Diagramm zur Ausrichtung

  • HorizontalAlignment und VerticalAlignment geben an, wie ein Element innerhalb des übergeordneten Containers positioniert werden soll.

    • Die Werte für "HorizontalAlignment" sind "Left", "Center", "Right" und "Stretch".
    • Die Werte für VerticalAlignment sind "Top", "Center", "Bottom" und "Stretch".

  • Stretch ist der Standard für beide Eigenschaften. Elemente füllen den gesamten Platz aus, der ihnen im übergeordneten Container zur Verfügung steht. Echte Zahlen für Height und Width heben einen Stretch-Wert auf, der dann stattdessen als Center-Wert fungiert. Einige Steuerelemente, z. B. Schaltflächen, setzen den Stretch-Standardwert in ihrem Standardstil außer Kraft.

  • HorizontalContentAlignment und VerticalContentAlignment legen fest, wie untergeordnete Elemente innerhalb eines Containers positioniert werden.

  • Die Ausrichtung kann sich auf das Beschneiden innerhalb eines Layoutbereichs auswirken. Beispielsweise wird bei HorizontalAlignment="Left" die rechte Seite des Elements beschnitten, wenn der Inhalt größer als die ActualWidth ist.

  • Textelemente verwenden die TextAlignment-Eigenschaft. Generell wird empfohlen, den Standardwert left-alignment zu verwenden. Weitere Informationen zur Gestaltung von Text findest du unter Typografie.

Ränder und Abstände

Eigenschaften für Rand und Abstand verhindern, dass die Benutzeroberfläche zu überladen oder zu spärlich aussieht. Außerdem ist es mit ihnen häufig einfacher, bestimmte Eingaben wie Stift und Touch zu verwenden. Hier ist eine Illustration, die Ränder und Abstände für einen Container und seinen Inhalt anzeigt.

Diagramm zu XAML-Rändern und -Abständen

Margin

Margin steuert den Leerraum um ein Element. Margin fügt ActualHeight und ActualWidth keine Pixel hinzu und wird bei Zugriffstests und bei Sourcingeingabeereignissen nicht als Teil des Elements betrachtet.

  • Die Margin-Werte können einheitlich oder eindeutig sein. Mit Margin="20" wird ein einheitlicher Rand von 20 Pixeln auf das Element auf der linken, oberen, rechten und unteren Seite angewandt. Mit Margin="0,10,5,25" werden die Werte links, oben, rechts und unten (in dieser Reihenfolge) angewandt.

  • Seitenränder sind additiv. Wenn zwei Elemente einen einheitlichen Rand von 10 Pixel angeben und in beliebiger Ausrichtung nebeneinander liegen, beträgt der Abstand zwischen ihnen 20 Pixel.

  • Negative Ränder sind zulässig. Die Verwendung eines negativen Rands kann jedoch häufig zu Beschneidungen oder Überzeichnungen von Peers führen, daher ist es keine gängige Technik, negative Ränder zu verwenden.

  • Margin-Werte werden als Letztes eingeschränkt, daher musst du vorsichtig mit Rändern umgehen, da Container Elemente beschneiden oder einschränken können. Ein Margin-Wert kann die Ursache dafür sein, dass ein Element nicht gerendert wird. Wenn ein Rand angewandt wird, kann die Dimension eines Elements auf 0 beschränkt werden.

Auffüllen

Padding steuert den Abstand zwischen dem inneren Rand eines Elements und seinem Inhalt oder seinen untergeordneten Elementen. Ein positiver Abstandswert verringert den Inhaltsbereich des Elements.

Im Gegensatz zu Margin ist Padding keine Eigenschaft von FrameworkElement. Es gibt mehrere Klassen, die jeweils eine eigene Padding-Eigenschaft definieren:

  • Control.Padding: wird für alle von Control abgeleiteten Klassen vererbt. Nicht alle Steuerelemente weisen Inhalte auf, sodass bei diesen Steuerelementen das Festlegen der Eigenschaft nichts bewirkt. Wenn das Steuerelement einen Rahmen aufweist, gilt der Abstand innerhalb dieses Rahmens.
  • Border.Padding: definiert den Abstand zwischen der von BorderThickness/BorderBrush gebildeten Rechtecklinie und dem Child-Element.
  • ItemsPresenter.Padding: trägt zur Darstellung der Objekte für Elemente in Elementsteuerelementen bei. Dabei wird der angegebene Abstand um die einzelnen Elemente herum platziert.
  • TextBlock.Padding und RichTextBlock.Padding: erweitern den Begrenzungsrahmen um den Text des Textelements. Diese Textelemente weisen keine Background-Eigenschaft auf, sodass sie schwierig zu erkennen sein können. Verwende für Block-Container daher stattdessen Margin-Einstellungen.

In allen diesen Fällen weisen Elemente auch eine Margin-Eigenschaft auf. Wenn sowohl Margin als auch Padding angewandt werden, sind sie additiv: Der erkennbare Abstand zwischen einem äußeren Container und beliebigem innerem Inhalt beträgt Margin plus Padding.

Beispiel

Sehen wir uns die Effekte von Rand und Abstand auf echte Steuerelemente an. Hier sehen Sie ein TextBox-Element innerhalb eines Rasters mit den Standardwerten "Margin" und "Padding" von 0.

TextBox mit Rand und Abstand von 0

Hier sehen Sie die gleichen TextBox- und Grid-Werte mit Rand- und Abstandswerten im TextBox-Element wie in diesem XAML-Code dargestellt.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

TextBox mit positiven Rand- und Abstandswerten

Stilressourcen

Sie müssen nicht jeden Eigenschaftswert einzeln für ein Steuerelement festlegen. In der Regel ist es effizienter, Eigenschaftswerte in einer Style-Ressource zu gruppieren und die Formatvorlage auf ein Steuerelement anzuwenden. Dies gilt insbesondere, wenn Sie dieselben Eigenschaftswerte auf viele Steuerelemente anwenden müssen. Weitere Informationen zum Verwenden von Stilen findest du unter XAML-Stile.

Allgemeine Empfehlungen

  • Wende Maßwerte nur auf bestimmte Schlüsselelemente an, und verwende das dynamische Layoutverhalten für die anderen Elemente. Dies sorgt für eine reaktionsschnelle Benutzeroberfläche, wenn die Fensterbreite geändert wird.

  • Wenn du Maßwerte verwendest, sollten alle Dimensionen, Ränder und Abstände ein Vielfaches von 4 epx sein. Wenn XAML effektive Pixel und Skalierung verwendet, um Ihre App auf allen Geräten und Bildschirmgrößen lesbar zu machen, skaliert es UI-Elemente um Vielfache von 4. Die Verwendung von Werten in Schritten von 4 sorgt durch Ausrichtung auf ganze Pixel für optimales Rendering.

  • Für kleine Fensterbreiten (unter 640 Pixel) werden Bundstege von 12 epx empfohlen, für größere Fensterbreiten Bundstege von 24 epx.

Empfohlene Bundstege