StackPanel コントロール

Last Updated 2011/09/21

"stack" の英語としての意味は、「積み上げる」です。StackPanel コントロールは上下または左右に子要素を並べる機能を持ちます。

ListBox コントロールや ComboBox コントロールの各項目は StackPanel コントロール（実体は VirtualizingStackPanel クラスですが）の中に Border コントロール、その中に TextBlock コントロールを配置したものです。Border コントロールは項目がフォーカスを得たなどのときに境界線や内部を塗りつぶすために使います。

まず、もっとも簡単な例を取り上げます。水色の部分が StackPanel コントロールの範囲を示します。

StackPanel コントロールに単純に Button コントロールを追加した例（左図）

<StackPanel Name="stackPanel1" Background="LightBlue">
  <Button Name="button1" Height="28" Width="90">Button1</Button>
  <Button Name="button2" Height="28" Width="90">Button2</Button>
  <Button Name="button3" Height="28" Width="90">Button3</Button>
</StackPanel>

上のコードに Margin プロパティの設定を追加した例（右図）

<StackPanel Name="stackPanel1" Background="LightBlue">
  <Button Name="button1" Height="28" Width="90">Button1</Button>
  <Button Name="button2" Height="28" Width="90">Button2</Button>
  <Button Name="button3" Height="28" Width="90">Button3</Button>
</StackPanel>

水平方向にレイアウトする

スタックする方向は、StackPanel クラスの Orientation プロパティで設定しますが、デフォルトは Orientation.Vertical です。つまり、水平方向にレイアウトする場合は Orientation プロパティに Orientation.Horizontal を指定します。

<StackPanel Name="stackPanel1" Background="LightBlue" Orientation="Horizontal">
  <Button Name="button1" Height="28" Width="90" Margin="4">Button1</Button>
  <Button Name="button2" Height="28" Width="90" Margin="4">Button2</Button>
/StackPanel>

サイズの自動調整

「コントロールのレイアウト」のページで、コントロールの位置とサイズは絶対座標値で設定しないと説明しました。しかし、上記のコードでは Height と Width プロパティとを設定しています。通常はこれでも問題ありませんが、ユーザーによるカスタマイズを可能とするアプリケーションではユーザーが大きなフォントを指定するかもしれません。その結果、Height = 28 では、間に合わないかもしれませんね。

以下のコードの実行結果は上図の左になります。

<StackPanel Name="stackPanel1" Background="LightBlue">
  <Button Name="button1" Height="28">Button1</Button>
  <Button Name="button2" Height="28" FontSize="16">Button2</Button>
  <Button Name="button3" Height="28" FontSize="24">Button3</Button>
</StackPanel>

そこで、オマジナイをかけます。

<StackPanel Name="stackPanel1" Background="LightBlue">
  <Button Name="button1" MinHeight="28">Button1</Button>
  <Button Name="button2" MinHeight="28" FontSize="16">Button2</Button>
  <Button Name="button3" MinHeight="28" FontSize="24">Button3</Button>
</StackPanel>

　Height プロパティを MinHeight プロパティに変更しただけですが、WPF が自動的にサイズを調整してくれます。

−以上−