Il controllo WrapPanel

Il WrapPanel posizionerà i suoi controlli figli uno di fianco all'altro, orizzontalmente (default) o verticalmente, fino a che non finisce lo spazio, per poi spostarsi alla riga successiva e continuare. Usalo quando vuoi una lista di controlli orizzontale o verticale che si adatta automaticamente quando non c'è più spazio.

Quando il WrapPanel è orientato orizzontalmente, i controlli figli avranno la stessa altezza, basandosi sull'elemento più alto. Quando il WrapPanel è orientato verticalmente, i controlli figli avranno la stessa larghezza, basandosi sull'elemento più largo.

Nel primo esempio, osserveremo un WrapPanel con l'orientamento di default (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>

Da notare come ho impostato un'altezza specifica su uno dei bottoni della seconda riga. Nello screenshot risultante, puoi vedere che questo ha portato l'intera riga di bottoni ad avere la stessa altezza al posto dell'altezza necessaria, come invece accade sulla prima riga. Noterai anche che il pannello fa esattamente quello che implica il nome: avvolge il contenuto quando non ha più spazio al suo interno. In questo caso, il quarto bottone non entra nella prima riga, quindi viene automaticamente spostato nella successiva.

Potresti ridimensionare la finestra, e quindi diminuire lo spazio disponibile, noterai come il pannello si adatta immediatamente alla nuova dimensione.

Tutto questo comportamento è vero anche impostando l'orientamento a verticale. Ecco lo stesso identico esempio di prima, ma con un WrapPanel verticale.

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

Puoi vedere come i bottoni vanno in verticale invece che in orizzontale, prima che passino alla colonna successiva perché hanno raggiunto il fondo della finestra. In questo caso, ho assegnato una larghezza maggiore al quarto bottone, e puoi notare che i bottoni della stessa colonna ereditano la stessa larghezza, come abbiamo appena visto con l'altezza del bottone nell'esempio orizzontale.

Fai attenzione al fatto che mentre il WrapPanel orizzontale adatta le altezze degli elementi nella stessa riga e il WrapPanel verticale adatta la larghezza degli elementi nella stessa colonna, l'altezza non viene adattata in un WrapPanel verticale e la larghezza non viene adattata in un WrapPanel orizzontale. Dai un'occhiata a questo esempio, che è il WrapPanel verticale ma dove il quarto bottone ha altezza e larghezza personalizzate:

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

Il risultato sarà questo:

Nota come il bottone 5 usa solamente la larghezza - non tiene conto dell'altezza, anche se questo porta il sesto bottone a essere spostato in una nuova colonna.