Das WrapPanel Steuerelement

Das WrapPanel positioniert jedes seiner Kindelemente direkt nebeneinander, horizontal (standard) oder vertikal, bis kein Platz mehr zur Verfügung steht. Dann wird in die nächste Zeile bzw. Spalte umgebrochen. Dieses Steuerelement sollte man benutzen wenn man eine vertikale oder horizontale Auflistung von Steuerelementen darstellen möchte, die automatisch umgebrochen werden, sobald nicht mehr genügend Platz zur Verfügung steht.

Wenn das WrapPanel eine horizontale Ausrichtung nutzt wird allen Kindelementen die gleiche Höhe zugewiesen, basierend auf dem höchsten Element. Bei einer vertikalen Ausrichtung des WrapPanels wird jedem Kindelement die gleiche Breite, basierend auf dem breitesten Element, zugewiesen.

Dieses erste Beispiel zeigt ein WrapPanel mit der Standardausrichtung (horizontal)

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
	<WrapPanel>
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Height="40">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

Achte darauf, wie die Höhe einer Schaltfläche in der zweiten Zeile definiert wurde. Der resultierende Screenshot zeigt, wie die komplette Zeile von Schaltflächen in ihrer Höhe dem festgelegten Element angepasst werden anstatt nur den benötigten Platz zu beanspruchen, wie es in der ersten Zeile ist. Man sieht auch, dass das Panel genau das tut, was der Namen aussagt: Es bricht den Inhalt um, wenn er nicht mehr in den restlichen Raum passt. Im Fall dieses Beispiels passt die vierte Schaltfläche nicht mehr in die erste Zeile und wird daher automatisch in die nächste Zeile verschoben.

Solltest du das Fenster und dadurch den verfügbaren Raum verkleinern, siehst du, wie sich das Panel direkt daran anpasst.

Das Verhalten wird ebenfalls beibehalten, wenn wir die Ausrichtung auf "vertikal" ändern. Hier sieht man das exakt gleiche Beispiel wie eben, jedoch mit einem "Vertikalen" WrapPanel:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

Man sieht, wie die Schaltflächen nun vertikal angeordnet werden, anstatt horizontal. Sie werden umgebrochen sobald die anzuordnenden Elemente den unteren Rand des Fensters erreichen. In diesem Fall habe ich dem vierten Fenster eine größere Breite zugewiesen. Somit werden alle Schaltflächen, die in der gleichen Spalte sind, die gleiche Breite zugewiesen, genau wie wir es mit der Höhe im "Horizontalen" Beispiel beobachten konnten.

Beachte jedoch, dass, während ein horizontales WrapPanel die Höhe in einer Zeile und ein vertikales WrapPanel die Breite in einer Spalte anpasst, die Höhe in vertikalen WrapPanels und die Breite in horizontalen WrapPanels nicht angepasst wird. Das kannst du in folgendem Beispiel sehen. Hier weisen wir der vierten Schaltfläche in einem vertikalen WrapPanel eine eigene Breite und Höhe zu.

<Button Width="140" Height="44">Test button 4</Button>

Das sieht dann wie folgt aus:

Die fünfte Schaltfläche nutzt nur die Breite - es beachtet nicht die Höhe, obwohl es die sechste Schaltfläche in die nächste Spalte schiebt.