StackPanel Layout

StackPanel は子要素を水平または垂直に1列に並べる最もシンプルなレイアウトパネルです。折り返しなしの線形配置で、ボタンバー・フォーム行・ナビゲーションメニューなど幅広い場面で使われます。

概要

WPF の StackPanel は子要素を一方向に積み重ねていくシンプルなパネルです。Orientation が Vertical（デフォルト）なら上から下へ、Horizontal なら左から右へと配置します。折り返し機能はないため、スペースが足りない場合は要素がクリップされます。

StackPanel は積み重ね方向には無限大のサイズを各子要素に与えるため、子要素は自然なサイズで表示されます。垂直 StackPanel では各子が全幅に引き伸ばされ（HorizontalAlignment=Stretch）、水平 StackPanel では各子が全高に引き伸ばされます（明示的に変更しない限り）。

StackPanel は ScrollViewer の中に配置してスクロールリストを作ったり、ItemsControl の ItemsPanel として使ったりするのが一般的なパターンです。シンプルな構造のため処理が軽く、フォームやダイアログの基本レイアウトコンテナとして多用されます。

子要素間の余白は StackPanel 自体には設定できないため、各子要素の Margin プロパティでスペーシングを管理するのが一般的なアプローチです。Style と Setter を使うと統一した Margin を一箇所で管理できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`Orientation`	`Horizontal / Vertical`	ツールバーのボタン群やパンくずナビゲーションのように要素を横に並べたい場合は Horizontal、フォーム行や通知スタックのように縦に積みたい場合は Vertical を使います。Vertical StackPanel では子要素が全幅に引き伸ばされ（HorizontalAlignment=Stretch）、Horizontal StackPanel では全高に引き伸ばされます。Horizontal を狭いコンテナで使うとはみ出た要素がクリップされて折り返しがないため、折り返しが必要な場合は WrapPanel を使ってください。
`Background (Panel)`	`Brush`	StackPanel 全体がマウスホバーやクリックに反応させたいとき、たとえばハイライト効果を実装する場面で設定します。`Transparent` を指定するとパネル全体がヒットテスト可能になり MouseEnter などのイベントを受け取れますが、`null`（デフォルト）のままではヒットテストが無効で子要素のない空き領域でのクリックが素通りします。大きなパネル領域がマウスに反応しない場合は Background が null になっていないか確認してください。
`ZIndex (Panel attached)`	`int`	StackPanel 内で要素が重なり合う場面（負の Margin や絶対位置で意図的に重ねる場合）で描画順序を制御したいときに使います。値が大きいほど手前（上層）に描画されます。ZIndex は同一親パネル内でのみ有効であり、StackPanel の子要素に設定した ZIndex でその StackPanel の外側の要素より手前に表示させることはできません。

XAML 使用例

<StackPanel Orientation="Vertical" Margin="16">
  <Label Content="名前:" />
  <TextBox Text="{Binding Name}" Margin="0,0,0,8" />
  <Label Content="メール:" />
  <TextBox Text="{Binding Email}" Margin="0,0,0,8" />
  <Button Content="送信" HorizontalAlignment="Right"
          Command="{Binding SubmitCommand}" />
</StackPanel>

<!-- 水平ボタンバー -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
  <Button Content="OK" Width="80" Margin="0,0,8,0" IsDefault="True" />
  <Button Content="キャンセル" Width="80" IsCancel="True" />
</StackPanel>

主な使用例

フォームレイアウト — ラベルと入力フィールドを垂直に積み重ねたシンプルなフォームを作成します。
ボタンバー — OK/キャンセルや操作ボタンを水平に並べるボタンバーに使用します。
ナビゲーションメニュー — サイドバーやフライアウトパネルのメニュー項目を垂直に並べます。
ItemsControl のパネル — ItemsPanel として使用してアイテムのコレクションを一列に表示します。
通知スタック — トースト通知やステータスメッセージを画面の端に縦積みで表示します。

ヒントとベストプラクティス

複雑なレイアウトには Grid を使う — 列の整合や比率サイズが必要な場合は StackPanel より Grid が適切です。
子要素の Margin でスペーシング — 従来の StackPanel にはギャッププロパティがなかったため、子要素の Margin で余白を管理するのが一般的です。Style の Setter を使うと統一的に管理できます。
長いコンテンツは ScrollViewer で囲む — StackPanel 自体はスクロールしないため、コンテンツが溢れる可能性がある場合は ScrollViewer でラップします。
大量データには VirtualizingStackPanel を使う — ItemsControl のパネルとして使う場合、アイテム数が多いときは VirtualizingStackPanel に変更してパフォーマンスを向上させます。
HorizontalAlignment/VerticalAlignment で整列 — 垂直 StackPanel の子要素は横幅を Stretch でいっぱいに使います。自然なサイズにしたい場合は HorizontalAlignment を Left/Center/Right に設定します。
アイテム間の余白（.NET 8 以降） — WPF .NET 8 以降では StackPanel に Spacing プロパティが追加されており、アイテム間の間隔を一括指定できます。古いバージョンでは子要素の Margin プロパティか、Style の Setter を使って統一的に余白を管理してください。
はみ出しとクリッピング — StackPanel はデフォルトで子要素のはみ出しをクリップしません。子要素がコンテナ外にはみ出して描画されることがあります。コンテナ外に描画させたくない場合は ClipToBounds="True" を設定してください。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で StackPanel のソースコードを見る →