O controle WrapPanel

O WrapPanel posicionará cada um dos seus controles filhos próximos ao outro, horizontalmente (padrão) ou verticalmente, até que não haja mais espaço, onde ele será encerrado na próxima linha e depois continuará. Use-o quando quiser um controle de lista vertical ou horizontal que se enquadre automaticamente quando não houver mais espaço.

Quando o WrapPanel usa a orientação Horizontal, os controles filho receberão a mesma altura, com base no item mais alto. Quando o WrapPanel é a orientação Vertical, os controles filho receberão a mesma largura, com base no item mais amplo.

No primeiro exemplo, vamos verificar um WrapPanel com a orientação padrão (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>

Veja como eu defini uma altura específica em um dos botões na segunda linha. Na captura de tela resultante, você verá que isso faz com que toda a linha de botões tenha a mesma altura em vez da altura necessária, como visto na primeira linha. Você também notará que o painel faz exatamente o que o nome sugere: Ele envolve o conteúdo quando não cabe mais nele. Nesse caso, o quarto botão não caberia na primeira linha, portanto, automaticamente envolve a próxima linha.

Se você fizer a janela e, assim, o espaço disponível, menor, você verá como o painel se ajusta imediatamente a ele:

Todo esse comportamento também acontece quando você define a orientação como Vertical. Aqui está exatamente o mesmo exemplo de antes, mas com um Vertical 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>

Você pode ver como os botões ficam verticais em vez de horizontais, antes de se sobrepor, pois chegam à parte inferior da janela. Neste caso, dei uma largura maior ao quarto botão, e você verá que os botões na mesma coluna também recebem a mesma largura, como vimos com a altura do botão no exemplo Horizontal.

Por favor, esteja ciente de que enquanto o WrapPanel Horizontal corresponderá à altura na mesma linha e o WrapPanel Vertical corresponderá à largura na mesma coluna, a altura não será correspondida em um WrapPanel Vertical e a largura não será correspondida em um WrapPanel Horizontal. Dê uma olhada neste exemplo, que é o Vertical WrapPanel, mas onde o quarto botão recebe uma largura e altura personalizadas:

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

Isso parecerá assim:

Veja como o botão 5 usa apenas a largura - ele não se importa com a altura, embora faça com que o sexto botão seja pressionado para uma nova coluna.