Ausrichtung, Rand, Abstand

In XAML-Apps erben die meisten Benutzeroberflächenelemente von der FrameworkElement-Klasse . Jedes FrameworkElement verfügt über Dimensions-, Ausrichtungs-, Rand- und Auffüllungseigenschaften, die das Layoutverhalten beeinflussen. Die folgende Anleitung bietet eine Übersicht über die Verwendung dieser Layouteigenschaften, um sicherzustellen, dass die Benutzeroberfläche Ihrer App in jedem Kontext lesbar und einfach zu verwenden ist.

Dimensionen (Höhe, Breite)

Durch die richtige Größenanpassung wird sichergestellt, dass alle Inhalte klar und lesbar sind. Benutzer sollten nicht scrollen oder zoomen müssen, um primäre Inhalte zu entschlüsseln.

Diagramm mit Dimensionen

  • Höhe und Breite geben die Größe eines Elements an. Die Standardwerte sind mathematisch NaN (Not A Number). Sie können feste Werte festlegen, die in effektiven Pixeln gemessen werden, oder Sie können die automatische oder proportionale Größenanpassung für das Fluidverhalten verwenden.

  • ActualHeight und ActualWidth sind schreibgeschützte Eigenschaften, die die Größe eines Elements zur Laufzeit bereitstellen. Wenn fluide Layouts wachsen oder verkleinern, ändern sich die Werte in einem SizeChanged-Ereignis . Beachten Sie, dass ein RenderTransform die Werte ActualHeight und ActualWidth nicht ändert.

  • Minwidth/MaxWidth und MinHeight/MaxHeight geben Werte an, die die Größe eines Elements einschränken und gleichzeitig fluide Größenänderungen zulassen.

  • FontSize und andere Texteigenschaften steuern die Layoutgröße für Textelemente. Textelemente verfügen zwar nicht über explizit deklarierte Dimensionen, aber sie haben ActualWidth und ActualHeight berechnet.

Ausrichtung

Die Ausrichtung sorgt dafür, dass Ihre Benutzeroberfläche übersichtlich, organisiert und ausgewogen aussieht und auch zum Einrichten visueller Hierarchien und Beziehungen verwendet werden kann.

Diagramm mit Ausrichtung

  • HorizontalAlignment und VerticalAlignment geben an, wie ein Element im übergeordneten Container 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 die Standardeinstellung für beide Eigenschaften, und Elemente füllen den gesamten Platz aus, den sie im übergeordneten Container angeben. Höhe und Breite der realen Zahl brechen einen Stretch-Wert ab, der stattdessen als Center-Wert fungiert. Einige Steuerelemente, z. B. Button, überschreiben den Stretch-Standardwert im Standardstil.

  • HorizontalContentAlignment und VerticalContentAlignment geben an, wie untergeordnete Elemente in einem Container positioniert werden.

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

  • Textelemente verwenden die TextAlignment-Eigenschaft . Im Allgemeinen empfehlen wir die Verwendung der linken Ausrichtung, dem Standardwert. Weitere Informationen zum Formatieren von Text finden Sie unter Typografie.

Ränder und Abstände

Rand- und Auffüllungseigenschaften vermeiden, dass die Benutzeroberfläche zu unübersichtlich oder zu spärlich aussieht, und sie können auch die Verwendung bestimmter Eingaben wie Stift und Touch vereinfachen. Hier sehen Sie eine Abbildung mit Rändern und Auffüllungen für einen Container und dessen Inhalt.

XAML-Ränder und Auffüllungsdiagramm

Margin

Der Rand steuert die Menge des leeren Platzes um ein Element. Margin fügt ActualHeight und ActualWidth keine Pixel hinzu und wird nicht als Teil des Elements für Treffertests und Beschaffungseingabeereignisse betrachtet.

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

  • Ränder sind additiv. Wenn zwei Elemente jeweils einen gleichmäßigen Rand von 10 Pixeln angeben und angrenzend Peers in beliebiger Ausrichtung sind, beträgt der Abstand zwischen ihnen 20 Pixel.

  • Negative Ränder sind zulässig. Die Verwendung eines negativen Rands kann jedoch oftmals Beschneidungen oder Überzeichnungen von Peers verursachen. Die Verwendung negativer Ränder ist daher keine übliche Technik.

  • Randwerte sind zuletzt eingeschränkt. Seien Sie daher vorsichtig mit Rändern, da Container Elemente ausschneiden oder einschränken können. Ein Margin-Wert kann die Ursache dafür sein, dass ein Element nicht gerendert wird. Wenn ein Margin angewendet wird, kann die Dimension eines Elements auf 0 beschränkt werden.

Auffüllen

Der Abstand steuert den Abstand zwischen dem inneren Rahmen eines Elements und den untergeordneten Inhalten oder Elementen. Ein positiver Padding-Wert verkleinert den Inhaltsbereich des Elements.

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

  • Control.Padding: Wird für alle von Control abgeleiteten Klassen vererbt. Nicht alle Steuerelemente verfügen über Inhalt, sodass das Festlegen der Eigenschaft für diese Steuerelemente nichts bringt. Wenn das Steuerelement über einen Rahmen verfügt, gilt die Füllung innerhalb dieses Rahmens.
  • Border.Padding: Definiert den Abstand zwischen der rechteckigen Linie, die von BorderThickness/BorderBrush erstellt wurde, und dem untergeordneten Element.
  • ItemsPresenter.Padding: Trägt zur Darstellung der Elemente in Elementsteuerelementen bei, wobei die angegebene Auffüllung um jedes Element herum platziert wird.
  • TextBlock.Padding und RichTextBlock.Padding: Erweitern Sie das umgebende Feld um den Text des Textelements. Diese Textelemente verfügen nicht über einen Hintergrund, sodass es visuell schwierig zu sehen sein kann. Verwenden Sie aus diesem Grund stattdessen Randeinstellungen für Container blockieren .

In jedem dieser Fälle verfügen Elemente auch über eine Margin-Eigenschaft. Wenn sowohl Margin als auch Padding angewendet werden, sind sie additiv: Der scheinbare Abstand zwischen einem äußeren Container und einem beliebigen inneren Inhalt ist Rand plus Füllung.

Beispiel

Sehen wir uns nun die Effekte „Margin“ und „Padding“ auf echte Steuerelemente an. Hier sehen Sie ein „TextBox“ innerhalb eines „Grid“ mit dem Standardwert 0 für „Margin“ und „Padding“.

TextBox mit Rand und Abstand von 0

Hier sehen Sie das gleiche „“TextBox und „Grid“ mit „Margin“- und „Padding“-Werten für das „TextBox“, wie in diesem XAML 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. Es ist in der Regel effizienter, Eigenschaftswerte in einer Style-Ressource zu gruppieren und den Stil auf ein Steuerelement anzuwenden. Dies gilt insbesondere dann, wenn Sie die gleichen Eigenschaftswerte auf viele Steuerelemente anwenden müssen. Weitere Informationen zur Verwendung von Formatvorlagen finden Sie unter XAML-Formatvorlagen.

Allgemeine Empfehlungen

  • Wenden Sie Messwerte nur auf bestimmte Schlüsselelemente an, und verwenden Sie das Verhalten des fluiden Layouts für die anderen Elemente. Dies ermöglicht eine reaktionsfähige Benutzeroberfläche , wenn sich die Fensterbreite ändert.

  • Wenn Sie Messwerte verwenden, sollten alle Dimensionen, Ränder und Auffüllungen in Schritten von 4 Epx erfolgen. Wenn XAML effektive Pixel und Skalierung verwendet, um Ihre App auf allen Geräten und Bildschirmgrößen lesbar zu machen, werden UI-Elemente um ein Vielfaches von 4 skaliert. Wenn Sie Werte in Schritten von 4 verwenden, wird das beste Rendering erzielt, indem sie auf ganze Pixel ausgerichtet wird.

  • Für kleine Fensterbreiten (weniger als 640 Pixel) empfehlen wir 12 Epx-Dachrinnen, und für größere Fensterbreiten empfehlen wir 24 Epx-Dachrinnen.

empfohlene Dachrinnen