El control WrapPanel

El control WrapPanel colocará cada uno de sus controles hijos uno al lado del otro, horizontalmente (predeterminado) o verticalmente, hasta que no haya más espacio, donde se ajustará a la siguiente línea y luego continuará. Úselo cuando busque una lista de controles que se alineen vertical u horizontal de forma automática cuando ya no tenga mas espacio.

Cuando el control WrapPanel use la orientación horizontal, los controles hijos tomarán la misma altura, basado en el elemento mas alto. Cuando el control WrapPanel tenga una orientación vertical, los controles hijos tomarán el mismo ancho, basado en el elemento mas ancho.

En el primer ejemplo, echaremos un vistazo al control WrapPanel con su orientación predeterminada (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>

Date cuenta como he puesto una altura específica a uno de los botones en la segunda fila. En el resultado, podrás ver que este causa que toda la fila de botones tomen la misma altura en lugar de la altura requerida, como se ve en la primer fila. También notarás que el panel hace exactamente lo que su nombre implica: Envuelve el contenido cuando este no puede ajustarse mas en el espacio restante. En este caso, el cuarto botón no pudo ajustarse en la primer línea, así que se acomoda en la siguiente línea.

Si se hace la ventana mas pequeña y se reduce el tamaño, verá como el panel se ajusta inmediatamente a ella.

Todo este comportamiento también sucede cuando la orientación es vertical. Aquí el mismo ejemplo anterior, pero con la orientación de forma vertical:

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

Puedes ver como los botones van en vertical en vez de horizontal, antes de que salten de columna por que han alcanzado el final de la ventana. En este caso, Le he dado un ancho mayor al cuarto botón y como ves los botones en la misma columna también han cogido el mismo ancho, justo como vimos con el alto del bono en el ejemplo horizontal.

Por favor ten en cuenta que mientras el WrapPanel Horizontal igualará las alturas en la misma fila y el WrapPanel Vertical igualará los anchos en la misma columna, ni las alturas se igualaran en el WrapPanel Vertical ni los anchos se igualaran en el WrapPanel Horizontal. Echa un ojo a este ejemplo, el cual es un WrapPanel Vertical donde el cuarto botón tiene altura y ancho personalizado:

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

Lucirá así:

Fijate como el botón 5 sólo usa el ancho - no se preocupa por la altura, esto provoca que el sexto botón sea expulsado a una nueva columna.