Ausrichtung, Rand, Abstand

In XAML-Apps erben die meisten Ui-Elemente (User Interface) von der FrameworkElement-Klasse . Jedes FrameworkElement verfügt über Dimensionen, Ausrichtungs-, Rand- und Abstandseigenschaften, die das Layoutverhalten beeinflussen. Der folgende Leitfaden enthält eine Übersicht über die Verwendung dieser Layouteigenschaften, um sicherzustellen, dass die Benutzeroberfläche Ihrer App lesbar und in jedem Kontext leicht zu verwenden ist.

Abmessungen (Höhe, Breite)

Durch die ordnungsgemäße 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.

• Höhe und Breite geben die Größe eines Elements an. Die Standardwerte NaN sind mathematisch (Keine Zahl). 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 dynamische Verhalten verwenden.

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

• Mindestbreite/Höchstbreite und Mindesthöhe/Höchsthöhe geben Werte an, die die Größe eines Elements einschränken und gleichzeitig eine flexible Größenänderung ermöglichen.

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

Ausrichtung

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

• 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 die Standardeinstellung für beide Eigenschaften, und Elemente füllen den gesamten Platz aus, der ihnen im übergeordneten Container bereitgestellt wird. Höhe und Breite für Reelle Zahlen brechen einen Stretch-Wert ab, der stattdessen als Zentrierenwert fungiert. Einige Steuerelemente, z. B. Schaltfläche, setzen den Standardwert "Stretch" in ihrem Standardstil außer Kraft.

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

• Die Ausrichtung kann sich auf das Clipping innerhalb eines Layout-Panels auswirken. Beispielsweise wird mit HorizontalAlignment="Left" die rechte Seite des Elements beschnitten, wenn der Inhalt größer als die tatsächliche Breite ist.

• Textelemente verwenden die TextAlignment-Eigenschaft . Im Allgemeinen wird empfohlen, die Linksausrichtung, den Standardwert, zu verwenden. Weitere Informationen zum Formatieren von Text finden Sie unter Typografie.

Rand und Abstand

Eigenschaften wie Rand und Innenabstand verhindern, dass die Benutzeroberfläche zu überladen oder zu leer wirkt, und sie können auch die Verwendung bestimmter Eingaben wie Stift und Touch erleichtern. Hier ist eine Abbildung, in der Ränder und Abstand für einen Container und dessen Inhalt angezeigt werden.

Margin

Der Rand steuert den leeren Platz um ein Element. Margin fügt keine Pixel zu ActualHeight und ActualWidth hinzu und gilt nicht als Teil des Elements für Treffertests und Sourcing-Eingabeereignisse.

• Randwerte können einheitlich oder unterschiedlich sein. Mit Margin="20" würde ein einheitlicher Rand von 20 Pixeln auf der linken, oberen, rechten und unteren Seite des Elements angewendet. Mit Margin="0,10,5,25" werden die Werte auf die linke, obere, rechte und untere Seite (in dieser Reihenfolge) angewendet.
• Seitenränder sind additiv. Wenn zwei Elemente beide einen einheitlichen Rand von 10 Pixeln angeben und benachbarte Peers in einer beliebigen Ausrichtung sind, 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 Überziehungen von Elementen führen, daher ist es nicht üblich, negative Ränder zu verwenden.
• Seitenrandwerte sind zuletzt eingeschränkt. Achten Sie daher bei Rändern darauf, dass Container Elemente beschneiden oder einschränken können. Ein Randwert könnte die Ursache dafür sein, dass ein Element nicht gerendert wird; wenn ein Rand angewendet wird, kann die Dimension eines Elements auf 0 beschränkt werden.

Polsterung

Der Innenabstand bestimmt den Abstand zwischen dem inneren Rand eines Elements und dessen untergeordnetem Inhalt oder 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 ihre eigene Padding-Eigenschaft definieren:

• Control.Padding: erbt an alle von Control abgeleiteten Klassen. Nicht alle Steuerelemente verfügen über Inhalt, sodass das Festlegen der Eigenschaft für diese Steuerelemente nichts bewirkt. Wenn das Steuerelement einen Rahmen aufweist, wird der Abstand innerhalb dieses Rahmens angewendet.
• Border.Padding: Definiert den Abstand zwischen der von BorderThickness/BorderBrush erstellten Rechtecklinie und dem Child-Element.
• ItemsPresenter.Padding: Trägt zur Darstellung der Elemente in Steuerungselementen bei und platziert den angegebenen Abstand um jedes Element.
• 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 erkennen ist. Verwenden Sie aus diesem Grund stattdessen Randeinstellungen an Blockcontainern.

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

Example

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.

Hier sehen Sie das gleiche TextBox- und Grid-Element mit Margin- und Pufferwerten in der TextBox, wie in diesem XAML-Code gezeigt.

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

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 den Style auf ein Steuerelement anzuwenden. Dies gilt insbesondere, wenn Sie dieselben Eigenschaftswerte auf viele Steuerelemente anwenden müssen. Weitere Informationen zur Verwendung von Formatvorlagen finden Sie unter XAML-Formatvorlagen.

Allgemeine Empfehlungen

• Wenden Sie nur Messwerte auf bestimmte Schlüsselelemente an und verwenden das dynamische Layoutverhalten für die anderen Elemente. Dadurch wird eine reaktionsfähige Benutzeroberfläche bereitgestellt, wenn sich die Fensterbreite ändert.
• Wenn Sie Maßangaben verwenden, sollten alle Dimensionen, Ränder und Abstände in Vielfachen von 4 epx erfolgen. 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 ergibt das beste Rendering, da sie mit ganzen Pixeln ausgerichtet werden.
• Für kleine Fensterbreiten (weniger als 640 Pixel) empfehlen wir 12 Epx-Bundstegen und für größere Fensterbreiten empfehlen wir 24 Epx-Bundstegen.

Zugehörige Themen

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding