De WrapPanel control

Het WrapPanel zal elk van zijn subcontrols na de andere positioneren, horizontaal (standaard) of verticaal, tot er geen plaats meer is, waarna het naar de volgende lijn zal verspringen en verder gaan. Gebruik het wanneer je een verticale of horizontale lijst met controls wil die automatisch verspringt wanneer er geen plaats meer is.

Wanneer het WrapPanel de horizontale oriëntatie gebruikt zullen de subcontrols dezelfde hoogte meekrijgen, gebaseerd op het grootste item. Wanneer de verticale oriëntatie gebruikt wordt zullen de subcontrols dezelfde breedte meekrijgen, gebaseerd op het breedste item.

In het eerste voorbeeld zullen we een WrapPanel uittesten met de standaard (horizontale) oriëntatie:

<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>

Merk op dat ik voor een button van de tweede rij een specifieke hoogte opgegeven heb. In het resulterend screenshot zie je dat dit een gelijke hoogte heeft opgeleverd voor alle buttons van de ganse rij in plaats van de gewenste hoogte van de rij erboven. U kunt ook zien dat het panel exact doet wat de naam inhoudt: het verplaatst de inhoud wanneer er geen plaats meer is voor meerdere. In dit geval was er geen plaats meer voor de vierde button in de eerste rij, en werd deze button automatisch naar de volgende rij verplaatst.

Wanneer je de window , en daarmee ook de beschikbare ruimte, smaller maakt, zie je hoe het panel direct de aanpassingen doet:

Exact hetzelfde gebeurt wanneer u de horizontale oriëntatie verandert in verticaal. Hier volgt exact hetzelfde voorbeeld, maar met een verticaal 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>

Je ziet hoe de buttons verticaal gaan in plaats van horizontaal, vooraleer ze naar een nieuwe kolom verspringen wanneer ze het onderste van de window bereiken. In dit geval gaf ik een grotere breedte op voor de vierde button, en u ziet dat de andere buttons uit dezelfde kolom dezelfde breedte aannemen, net zoals met de hoogte gebeurde in het horizontaal georiënteerde voorbeeld.

Let er wel op dat, waar het Horizontaal WrapPanel de hoogten gelijkstelt binnen dezelfde rij en het Verticaal WrapPanel de breedtes gelijkstelt binnen dezelfde kolom, de hoogtes niet gelijkgesteld worden in een Verticaal WrapPanel en de breedtes niet gelijkgesteld worden in een Horizontaal WrapPanel. Bekijk het volgende voorbeeld van het Verticaal WrapPanel, waar de vierde button een gewone breedte EN hoogte krijgt:

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

Dit zal er zo uitzien:

Zie hoe button 5 enkel de breedte overneemt - hij trekt zich niets aan van de hoogte, alhoewel hij wel maakt dat de zesde button naar een nieuwe kolom geduwd wordt.