The WrapPanel control

ラップパネルは子コントロールを余白がなくなるまで水平方向（デフォルト）か垂直方向に順に並べ、余白がなくなったら次の行に折り返します。余白に応じて自動で折り返す、垂直か水平のリストコントロールが欲しいときに使います。

WrapPanel を水平方向並びで使う時、子コントロールは一番高いアイテムに高さが揃えられます。垂直並びに使う時は子コントロールの幅が一番長いアイテムに揃えられます。

最初の例では、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="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>

２行目のボタンの一つに特定の高さを指定しています。結果のスクリーンショットでは、この設定により、行全部のボタンの高さが、最初の行のような必要な高さよりも高くなっていることがわかるでしょう。パネルは、名前が表すとおりの動作をしていることもわかるでしょう。つまり、コンテンツが入り切らなくなったらコンテンツを折り返します。この場合、４番目のボタンは最初の行に入り切らないので自動的に次の行に折り返します。

ウィンドウを操作してその結果有効なスペースが小さくなったら、パネルが即座に調整するのがわかるでしょう。

並べ方を垂直にした場合も全く同じことが起こります。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>

ボタンは水平ではなく垂直に並んでいます。そしてウィンドウの下部に到達する前に折り返しています。この場合、４番目のボタンの幅を広げているので、この列のボタンは水平配置の例で高さが揃ったように幅が揃っています。

水平ラップパネルでは行の高さが、垂直ラップパネルでは列の幅がそれぞれ揃っていますが、垂直ラップパネルの高さと水平ラップパネルの幅は一致していません。４番目のボタンの高さと幅両方を設定した垂直ラップパネルの例を見て下さい。

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

それはこの様になります。

ボタン５は幅だけが揃っています。高さについては影響ありません。しかし６番目のボタンは次の列へ押し出されています。