Le contrôle WrapPanel

Le WrapPanel positionnera chacun des contrôles enfants les uns après les autres, horizontalement (par défaut) ou verticalement, jusqu'à ce qu'il n'y ai plus d'espace, il commencera alors une nouvelle ligne ou une nouvelle colonne et continuera. Utilisez le lorsque vous voulez une liste verticale ou horizontale qui continue automatiquement sur une autre ligne ou colonne lorsqu'il n'y a plus d'espace.

Quand le WrapPanel utilise une orientation horizontale, tous les contrôles enfants se verront assigner une hauteur identique, basée sur le plus grand. Quand le WrapPanel utilise une orientation verticale, les contrôles enfants auront la même largeur, basée sur l'élément le plus large.

Dans le premier exemple, nous allons faire un test avec l'orientation par défaut (horizontale):

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

Remarquez que j'ai spécifié une hauteur pour l'un des boutons de la seconde ligne. Dans l'aperçu correspondant, vous pouvez voir que tous les boutons de la seconde ligne sont redimensionnés à cette même nouvelle hauteur contrairement à ceux de la première ligne. Vous remarquerez également que le WrapPanel fait exactement ce qu'il est supposé faire: dans notre cas, le quatrième bouton ne pouvant plus tenir sur la première ligne, une nouvelle est entamé.

Si vous réduisez la largeur de la fenêtre, et par la même occasion rendez l'espace disponible plus faible, vous verrez comment le WrapPanel s'ajuste immédiatement:

Ce comportement est tout aussi valable pour une orientation verticale. Ci-dessous le même exemple mais avec un un WrapPanel 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>

Vous pouvez voir que les boutons se disposent verticalement et non plus horizontalement, jusqu'à ce qu'ils atteignent le bas de la fenêtre. Dans ce cas j'ai donné une largeur plus importante au quatrième bouton, et vous pouvez voir que les boutons de la même colonne sont également plus larges. Nous retrouvons le même comportement qu'avec l'exemple de la disposition horizontale.

Soyez attentif au fait que bien le WrapPanel horizontal uniformisera les hauteurs d'une même ligne, et le WrapPanel vertical les largeurs d'une même colonne, les largeurs pourront être différentes sur une même ligne, et les hauteurs sur une même colonne. Regardez l'exemple suivant où j'utilise un WrapPanel vertical mais où je spécifie une largeur ET une hauteur différente pour le quatrième bouton.

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

Cela ressemblera à ça:

Remarquez comment le bouton 5 n'utilise que la largeur - il ignore la hauteur du bouton 4. Cela provoque également le rejet du bouton 6 sur une nouvelle colonne.