Layout mit absoluter und dynamischer Positionierung

Artikel
08/10/2011

Wenn Sie in einer Anwendung ein Fenster erstellen, müssen Sie angeben, wie das Layout der Steuerelemente in diesem Fenster aussehen soll. Außerdem müssen Sie festlegen, wie sich die Steuerelemente verhalten, wenn der Benutzer die Fenstergröße ändert. Diese Aspekte werden durch absolute und dynamische Positionierung festgelegt.

Wenn Sie in einer Anwendung ein Fenster erstellen, legen Sie die Größe des Fensters sowie die der Steuerelemente in diesem Fenster fest. Sie müssen festlegen, wie sich das Fenster und die Steuerelemente verhalten, wenn sich deren Inhalt ändert. Wenn Sie z. B. einem Fenster ein Label-Steuerelement hinzufügen, können Sie das Verhalten der Bezeichnung festlegen, wenn der Text in eine andere Sprache übersetzt wird. Diese Aspekte werden durch dynamische Größenanpassung festgelegt.

Layouttypen

Die folgenden drei Layouttypen können im WPF Designer für Visual Studio erstellt werden:

Absolut
Untergeordnete Elemente werden durch Angabe ihrer genauen Position relativ zum übergeordneten Element angeordnet. Beispielsweise können Sie Steuerelemente auf einem Bereich anordnen, indem Sie die linke und die obere Koordinate der Steuerelemente relativ zum Bereich angeben. Die untergeordneten Elemente werden nicht verschoben, wenn die Größe des übergeordneten Elements geändert wird. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines Layouts auf Grundlage der absoluten Positionierung oder unter Exemplarische Vorgehensweise: Erstellen eines Layouts auf Grundlage der absoluten Positionierung.
Dynamisch
Untergeordnete Elemente werden so angeordnet, dass deren Anordnung und Umbruchverhalten relativ zum übergeordneten Element erfolgt. Beispielsweise können Sie Steuerelemente in einem Bereich anordnen und angeben, dass sie horizontal umbrechen sollen. Wenn das übergeordnete Element verkleinert wird, werden die untergeordneten Elemente in die nächste Zeile verschoben. Wenn das übergeordnete Element vergrößert wird, werden die untergeordneten Elemente in die vorherige Zeile verschoben. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines dynamischen Layouts oder unter Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts.
Datengesteuert dynamisch
Sie binden ein Steuerelement an Daten. Das Steuerelement wird mit Daten gefüllt, und die Zeilen- und Spaltengröße wird automatisch an die Daten angepasst.

Nach Möglichkeit sollte immer ein dynamisches Layout verwendet werden. Dynamische Layouts sind die flexibelsten Layouts. Sie bieten dem Endbenutzer die meisten Steuerungsmöglichkeiten für die Umgebung. Bei dynamischen Layouts passt sich der Inhalt an Lokalisierung und andere Änderungen an. Absolute Layouts sollten nur verwendet werden, wenn eine genaue, nichtänderbare Positionierung von Elementen wichtig ist, oder wenn nur ein einzelnes untergeordnetes Element (z. B. ein Bild oder eine Grafik) vorhanden ist.

Tipp

Absolute und dynamische Layouts können kombiniert werden. So kann z. B. ein Fenster ein dynamisches Gesamtlayout haben, aber über einen Bereich des Fensters verfügen, in dem absolute Positionierung verwendet wird.

Tipp

Legen Sie die UseLayoutRounding-Eigenschaft fest, um anzugeben, wann nicht ganzzahlige Pixelwerte, die während der Übergaben von Measure und Arrange berechnet werden, auf ganze Pixelwerte gerundet werden. Die Eigenschaft wird von untergeordneten Steuerelementen geerbt.

Flächen

WPF stellt viele Panel-Steuerelemente bereit, die eine absolute und dynamische Positionierung unterstützen. Panel-Steuerelemente können kombiniert werden, indem Sie ein Panel-Steuerelement als untergeordnetes Element eines anderen hinzufügen. Sie können die folgenden Panel-Steuerelemente verwenden, um Elemente in Anwendungen zu positionieren:

Panel	Layouttyp	Beschreibung
Grid	Dynamisch	Definiert einen Bereich, in dem untergeordnete Elemente in Zeilen und Spalten positioniert werden können.
DockPanel	Dynamisch	Definiert einen Bereich, in dem untergeordnete Elemente am oberen, unteren, linken oder rechten Rand angeordnet und gestapelt werden können.
WrapPanel	Dynamisch	Ordnet untergeordnete Elemente automatisch nacheinander an. Der Inhalt am Rand des übergeordneten Containers wird dabei auf die nächste Zeile verschoben. Das Anordnen erfolgt nacheinander von oben nach unten oder von links nach rechts, abhängig davon, ob die Ausrichtung auf horizontal oder vertikal festgelegt ist.
StackPanel	Dynamisch	Ordnet untergeordnete Elemente automatisch in einer einzelnen Zeile an, die horizontal oder vertikal ausgerichtet werden kann.
UniformGrid	Dynamisch	Ordnet untergeordnete Elemente automatisch in Zeilen und Spalten an. Die Zeilen und die Spalten werden in gleichmäßigen Abständen angeordnet. Wenn ein Element nicht in eine Zelle passt, wird es abgeschnitten.
Canvas	Absolut	Definiert einen Bereich, in dem untergeordnete Elemente mithilfe von Koordinaten explizit positioniert werden können.

Steuerelemente

In WPF werden Steuerelemente zur Verfügung gestellt, die eine datengesteuert dynamische Positionierung unterstützen. Diese Steuerelemente können an Daten gebunden und ihre Größe automatisch der Datenmenge angepasst werden. Mit den folgenden Steuerelementen können Sie Daten dynamisch in Ihren Anwendungen anzeigen:

Steuerelement	Layouttyp	Beschreibung
ListView	Datengesteuert dynamisch	Zeigt eine Liste von Datenelementen an.
GridView	Datengesteuert dynamisch	Zeigt Datenelemente für ein Listenansicht-Steuerelement in Spalten an.

Dynamische Größenanpassung

Bei der dynamischen Größenanpassung konfigurieren Sie Steuerelemente so, dass sie sich automatisch erweitern oder verkleinern, um sich dem Inhalt anzupassen. Wenn Sie z. B. die Größe eines Label-Steuerelements an den Text in einer Sprache anpassen, und der Text in eine andere Sprache übersetzt wird, kann für das Steuerelement festgelegt werden, dass es sich automatisch an die Größe des neuen Texts anpasst. Bei der dynamischen Positionierung wird die dynamische Größenanpassung unterstützt, indem die Position von Steuerelementen bei Änderung der Größe automatisch angepasst wird.

Mithilfe der folgenden Eigenschaften kann das Erstellen von dynamischen Layouts vereinfacht werden:

Eigenschaft	Werte	Gilt für	Hinweise
Width	double, Auto, *	Fenster, Steuerelemente, Rasterspalten.	Verwenden Sie die automatische Größenanpassung und die Größenanpassung nach Sternen, um maximale Flexibilität zu ermöglichen. Weitere Informationen finden Sie im nächsten Abschnitt. * gilt nur für Rasterspalten.
Height	double, Auto, *	Fenster, Steuerelemente, Rasterzeilen.	Verwenden Sie die automatische Größenanpassung und die Größenanpassung nach Sternen, um maximale Flexibilität zu ermöglichen. Weitere Informationen finden Sie im nächsten Abschnitt. * gilt nur für Rasterzeilen.
MinWidth	double	Fenster, Steuerelemente, Rasterspalten.	Legen Sie diese Eigenschaft auf 0 (null) fest, um maximale Flexibilität zu ermöglichen.
MinHeight	double	Fenster, Steuerelemente, Rasterzeilen.	Legen Sie diese Eigenschaft auf 0 (null) fest, um maximale Flexibilität zu ermöglichen.
MaxWidth	double, Infinity	Fenster, Steuerelemente, Rasterspalten.	Legen Sie diese Eigenschaft auf "Infinity" (unendlich) fest, um maximale Flexibilität zu ermöglichen.
MaxHeight	double, Infinity	Fenster, Steuerelemente, Rasterzeilen.	Legen Sie diese Eigenschaft auf "Infinity" (unendlich) fest, um maximale Flexibilität zu ermöglichen.
ResizeMode	NoResize CanMinimize CanResize CanResizeWithGrip	Windows	Legen Sie diese Eigenschaft auf CanResize fest, um maximale Flexibilität zu ermöglichen. Dadurch können Benutzer die Größe des Fensters ändern.
SizeToContent	Manual Width Height WidthAndHeight	Windows	Legen Sie diese Eigenschaft auf WidthAndHeight fest, um maximale Flexibilität zu ermöglichen. Dies ermöglicht eine automatische Größenanpassung des Fensters, wenn dessen Inhalt erweitert wird.

Automatische Größenanpassung und Größenanpassung nach Sternen

Die automatische Größenanpassung wird verwendet, um Steuerelemente an deren Inhalt anzupassen. Dies gilt insbesondere, wenn der Inhalt von Steuerelementen geändert wird. Bei der Größenanpassung nach Sternen wird der verfügbare Platz zwischen den Zeilen und Spalten eines Rasters nach gewichteten Proportionen verteilt. In XAML (Extensible Application Markup Language) werden Sternwerte als * (oder n*) ausgedrückt. Wenn Sie beispielsweise über ein Raster mit 4 Spalten verfügen, sollten Sie die Spaltenbreiten wie folgt festlegen:

Spalte 1	Auto	Die Größe der Spalte wird dem Inhalt entsprechend angepasst.
Spalte 2	*	Nachdem die Spalten mit der automatischen Größenanpassung berechnet wurden, erhält die Spalte einen Teil der verbleibenden Breite. Spalte 2 ist halb so breit wie Spalte 4.
Spalte 3	Auto	Die Größe der Spalte wird dem Inhalt entsprechend angepasst.
Spalte 4	2*	Nachdem die Spalten mit der automatischen Größenanpassung berechnet wurden, erhält die Spalte einen Teil der verbleibenden Breite. Spalte 4 ist zweimal so breit wie Spalte 2.