syncfusion-winforms-layout-managers

Syncfusion WinForms LayoutManagers の実装

LayoutManagers パッケージは、特定のレイアウト戦略に基づいて、コンテナーコントロール（Panel、Form など）内の子コントロールを自動的に配置する、5 種類の専用レイアウトマネージャーを提供します。これらのマネージャーを使うと、手動での位置指定が不要になり、プロフェッショナルで保守しやすいレイアウトを実現できます。

このスキルを使用する場面

ユーザーが以下を必要としている場合に、このスキルを使用してください。

• 自動レイアウト管理： 手動配置の代わりに、レイアウトマネージャーでコントロールを配置する
• BorderLayout（5 領域へのドッキング）： コントロールを North、South、East、West、Center の位置にドッキングする
• CardLayout（ウィザード／プロパティページ）： スタック内で一度に 1 つのコントロールを表示する（ウィザード、タブ付きコンテンツなど）
• FlowLayout（フロー配置）： コントロールを水平方向または垂直方向に並べ、自動的に折り返す
• GridLayout（均等なグリッド）： 同じサイズのセルで構成される均等なグリッドにコントロールを配置する
• GridBagLayout（柔軟なグリッド）： セルサイズを変えたり、複数セルにまたがるコントロールを配置したりして、複雑なレイアウトを作成する
• コンテナーベースのレイアウト： Panel、Form、または任意の ContainerControl にレイアウトを適用する
• 制約ベースの位置指定： 絶対座標の代わりに、レイアウトルールを定義する
• レスポンシブレイアウト： コンテナーのサイズ変更に応じて調整されるレイアウトを作成する
• プロフェッショナルなフォーム： 一貫性があり、保守しやすいフォームレイアウトを作成する

コンポーネントの概要

LayoutManagers パッケージ（Syncfusion.Windows.Forms.Tools）は、5 種類のレイアウトマネージャーを提供します。

1. BorderLayout

目的： .NET のドッキングと同様に、境界沿いと中央にコントロールをドッキングします

主な機能：

• 5 つの領域：North、South、East、West、Center
• 位置ベースの制約
• 間隔の制御（HGap、VGap）
• 位置ごとのサイズのカスタマイズ

使用場面： MDI スタイルのインターフェイス、ドッキングパネル、ヘッダー／フッター／サイドバーを備えたアプリケーションシェル

2. CardLayout

目的： スタック内の子コントロールを一度に 1 つ表示します

主な機能：

• カードのスタック（表示されるのは一度に 1 つのみ）
• ナビゲーション（First、Last、Next、Previous）
• カードの命名／識別
• レイアウトモード（Default、Fill）
• カードごとの画像のサポート

使用場面： ウィザード、プロパティページ、タブのないタブ付きコンテンツ、段階的に進むフォーム

3. FlowLayout

目的： 水平または垂直のフローでコントロールを配置します（最もよく使用されます）

主な機能：

• 水平または垂直のレイアウトモード
• 自動折り返し
• 配置オプション（Near、Far、Center、ChildConstraints）
• 子ごとの制約（MinSize、PreferredSize）
• フローの方向（通常、反転）
• AutoHeight 機能

使用場面： ツールバー、ボタンパネル、タグリスト、レスポンシブコンテンツ、汎用レイアウト全般

4. GridLayout

目的： 均等なグリッドにコントロールを配置します

主な機能：

• 行と列の設定
• 同じサイズのセル
• 子コントロールの自動配置
• 間隔の制御（HGap、VGap）

使用場面： 電卓のレイアウト、ボタングリッド、均等なアイコンパネル、シンプルな表形式のレイアウト

5. GridBagLayout

目的： 柔軟なグリッドで複雑なレイアウトを作成します

主な機能：

• 可変の行／列サイズ
• セルの結合（行および列）
• アンカー位置（9 種類のオプション）
• 塗りつぶしモード（None、Horizontal、Vertical、Both）
• 重みベースのサイズ変更（WeightX、WeightY）
• セルごとのパディング（Insets）

使用場面： 複雑なフォーム、ダイアログボックス、セルサイズが可変のレイアウト、高度な位置指定が必要な場合

主要な名前空間： Syncfusion.Windows.Forms.Tools

アセンブリ： Syncfusion.Shared.Base.dll

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

参照する場面： ユーザーがインストール、コンテナーの概念の理解、または最初のレイアウトマネージャーの設定を必要としている場合。

説明するトピック：

• アセンブリの配置と NuGet パッケージ
• コンテナーコントロールの概念（Panel、Form、ContainerControl）
• 子コントロールの管理
• デザイナーを使用したレイアウトマネージャーの追加
• コードを使用したレイアウトマネージャーの追加
• すべてのレイアウトタイプの基本設定
• 共通設定（間隔、ギャップ）
• レイアウトイベント

BorderLayout（5 領域ドッキング）

📄 参照: references/border-layout.md

参照するタイミング: コントロールを境界（North、South、East、West、Center）にドッキングしたい場合。

トピック:

• BorderLayout の概要と位置の制約
• 各位置へのコントロールの追加
• デザイナーを使う方法とコードを使う方法
• SetConstraints メソッド
• 間隔の設定（HGap、VGap）
• 位置ごとのサイズのカスタマイズ
• MDI スタイルのレイアウト例
• ドックパネルの例
• ボーダーレイアウトのベストプラクティス

CardLayout（ウィザード／スタック）

📄 参照: references/card-layout.md

参照するタイミング: ウィザード、プロパティページ、またはスタックベースのナビゲーションが必要な場合。

トピック:

• CardLayout の概要（一度に表示されるカードは 1 つ）
• カードの名前付けと識別
• ナビゲーションメソッド（First、Last、Next、Previous、ActivateCard）
• LayoutMode（Default、Fill）
• カードごとの画像設定
• デザイナーの使用（SelectedCard プロパティ）
• プログラムによるカード管理
• ウィザードコントロールの実装
• プロパティページの実装
• ウィザードの完全な例
• ベストプラクティス

FlowLayout（フロー配置）

📄 参照: references/flow-layout.md

参照するタイミング: 水平／垂直フローレイアウトが必要な場合（最も一般的なユースケース）。

トピック:

• FlowLayout の概要（最も汎用性が高い）
• LayoutMode（Horizontal、Vertical）
• フローの方向（通常、逆方向）
• 配置オプション（Near、Far、Center、ChildConstraints）
• 折り返しのための AutoHeight 機能
• HGap と VGap の間隔
• 子ごとの制約（MinSize、PreferredSize）
• SetConstraints メソッド
• 折り返しの動作
• 水平ツールバーの例
• 垂直サイドバーの例
• タグリストの例
• 高度な制約のシナリオ
• ベストプラクティス

GridLayout（均一グリッド）

📄 参照: references/grid-layout.md

参照するタイミング: セルのサイズが均一なグリッドが必要な場合。

トピック:

• GridLayout の概要
• 行と列の設定
• 子の配置順序の自動設定
• HGap と VGap の間隔
• デザイナーを使う方法とコードを使う方法
• グリッドのサイズ設定の動作
• 電卓レイアウトの例
• ボタングリッドの例
• ベストプラクティス

GridBagLayout（柔軟なグリッド）

📄 参照: references/grid-bag-layout.md

参照するタイミング: セルのサイズが可変で、コントロールを複数のセルにまたがって配置する複雑なレイアウトが必要な場合。

トピック:

• GridBagLayout の概要（最も強力）
• 仮想グリッドの概念（行／列のサイズは可変）
• GridBagConstraints の設定
• Anchor プロパティ（North、South、East、West、Center、NorthEast、NorthWest、SouthEast、SouthWest）
• Fill プロパティ（None、Horizontal、Vertical、Both）
• CellSpan（RowSpan、ColSpan）
• WeightX と WeightY（リサイズ時の配分）
• Insets（セルのパディング）
• フォームレイアウトの例
• 電卓レイアウトの例
• 高度な複数セル配置のシナリオ
• ベストプラクティス

---

レイアウトタイプの選択ガイド

要件に基づいてレイアウトを選択してください。

要件	推奨レイアウト	理由
境界へのドッキング（ヘッダー／フッター／サイドバー）	BorderLayout	5 領域にシンプルに配置できます
ウィザードまたは複数ステップのフォーム	CardLayout	ナビゲーション付きで、一度に 1 つのカードを表示します
水平ボタンツールバー	FlowLayout（Horizontal）	自動折り返しと柔軟な間隔に対応します
垂直サイドバーまたはリスト	FlowLayout（Vertical）	自動折り返しと柔軟な間隔に対応します
電卓またはキーパッド	GridLayout または GridBagLayout	均一グリッドまたは柔軟なグリッドです
ラベル／フィールドを含む複雑なフォーム	GridBagLayout	セルサイズの変更、複数セルへの配置、整列に対応します
シンプルな表形式レイアウト（均一なセル）	GridLayout	行と列が均一です
汎用的なレスポンシブレイアウト	FlowLayout	最も汎用性が高く、幅広く適用できます

---

クイックスタートの例

BorderLayout：境界へのドッキング

using Syncfusion.Windows.Forms.Tools;

// Create BorderLayout
BorderLayout borderLayout = new BorderLayout();
borderLayout.ContainerControl = panel1; // Panel as container

// Create controls for each position
Label northLabel = new Label { Text = "Header", BackColor = Color.LightBlue };
Label southLabel = new Label { Text = "Footer", BackColor = Color.LightGray };
Label eastLabel = new Label { Text = "Right", BackColor = Color.LightYellow };
Label westLabel = new Label { Text = "Left", BackColor = Color.LightGreen };
Panel centerPanel = new Panel { BackColor = Color.White };

// Add controls to container
panel1.Controls.Add(northLabel);
panel1.Controls.Add(southLabel);
panel1.Controls.Add(eastLabel);
panel1.Controls.Add(westLabel);
panel1.Controls.Add(centerPanel);

// Set constraints (position each control)
borderLayout.SetPosition(northLabel, BorderPosition.North)
borderLayout.SetPosition(southLabel, BorderPosition.South);
borderLayout.SetPosition(eastLabel, BorderPosition.East);
borderLayout.SetPosition(westLabel, BorderPosition.West);
borderLayout.SetPosition(centerPanel, BorderPosition.Center);

// Configure spacing
borderLayout.HGap = 5;
borderLayout.VGap = 5;

CardLayout：ウィザードページ

// Create CardLayout
CardLayout cardLayout = new CardLayout();
cardLayout.ContainerControl = panel1;

// Create wizard pages
Panel page1 = new Panel { BackColor = Color.AliceBlue };
Label label1 = new Label { Text = "Step 1: Welcome", Dock = DockStyle.Fill };
page1.Controls.Add(label1);

Panel page2 = new Panel { BackColor = Color.Honeydew };
Label label2 = new Label { Text = "Step 2: Configure", Dock = DockStyle.Fill };
page2.Controls.Add(label2);

Panel page3 = new Panel { BackColor = Color.LavenderBlush };
Label label3 = new Label { Text = "Step 3: Finish", Dock = DockStyle.Fill };
page3.Controls.Add(label3);

// Add pages to container
panel1.Controls.Add(page1);
panel1.Controls.Add(page2);
panel1.Controls.Add(page3);

// Name each card
cardLayout.SetCardName(page1, "Welcome");
cardLayout.SetCardName(page2, "Configure");
cardLayout.SetCardName(page3, "Finish");

// Navigation
cardLayout.LayoutMode = CardLayoutMode.Fill; // Fill container
cardLayout.First();  // Show first card

// Navigate programmatically
// cardLayout.Next();   // Next card
// cardLayout.Previous(); // Previous card
// cardLayout.ActivateCard("Configure"); // Jump to specific card

FlowLayout：水平ツールバー

// Create FlowLayout
FlowLayout flowLayout = new FlowLayout();
flowLayout.ContainerControl = panel1;
flowLayout.LayoutMode = FlowLayoutMode.Horizontal;
flowLayout.Alignment = FlowAlignment.Near;
flowLayout.HGap = 10;
flowLayout.VGap = 5;

// Add buttons
for (int i = 1; i <= 8; i++)
{
    Button btn = new Button { Text = $"Button {i}", Size = new Size(80, 30) };
    panel1.Controls.Add(btn);
}

// Buttons will flow horizontally and wrap to next line automatically

GridLayout：ボタングリッド

// Create GridLayout (3x3 grid)
GridLayout gridLayout = new GridLayout();
gridLayout.ContainerControl = panel1;
gridLayout.Rows = 3;
gridLayout.Columns = 3;
gridLayout.HGap = 5;
gridLayout.VGap = 5;

// Add 9 buttons (automatic placement in grid)
for (int i = 1; i <= 9; i++)
{
    Button btn = new Button { Text = i.ToString() };
    panel1.Controls.Add(btn);
}

GridBagLayout：フォームレイアウト

// Create GridBagLayout
GridBagLayout gridBagLayout = new GridBagLayout();
gridBagLayout.ContainerControl = panel1;

// Create form controls
Label nameLabel = new Label { Text = "Name:", AutoSize = true };
TextBox nameTextBox = new TextBox { Width = 200 };
Label emailLabel = new Label { Text = "Email:", AutoSize = true };
TextBox emailTextBox = new TextBox { Width = 200 };
Button submitButton = new Button { Text = "Submit" };

// Add to container
panel1.Controls.Add(nameLabel);
panel1.Controls.Add(nameTextBox);
panel1.Controls.Add(emailLabel);
panel1.Controls.Add(emailTextBox);
panel1.Controls.Add(submitButton);

// Create constraints
GridBagConstraints labelConstraints = new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false);
labelConstraints.Anchor = GridBagAnchor.East; // Align right

GridBagConstraints fieldConstraints = new GridBagConstraints(1, 0, 1, 1);
fieldConstraints.Fill = GridBagFill.Horizontal;
fieldConstraints.WeightX = 1; // Take extra horizontal space

// Apply constraints
gridBagLayout.SetConstraints(nameLabel, new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false));
gridBagLayout.SetConstraints(nameTextBox, new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false) {WeightX = 1 });
gridBagLayout.SetConstraints(emailLabel, new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false));
gridBagLayout.SetConstraints(emailTextBox, new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false){ WeightX = 1 });
gridBagLayout.SetConstraints(submitButton, new new GridBagConstraints(0, 0, 1, 1, 1.0, 0.0, AnchorTypes.East, FillType.Horizontal, new Insets(5,5,5,5), 0, 0, false));

---

一般的なパターン

アプリケーションシェル（BorderLayout）

// Header + Footer + Sidebar + Content area
BorderLayout borderLayout = new BorderLayout();
borderLayout.ContainerControl = this; // Form as container
borderLayout.HGap = 0;
borderLayout.VGap = 0;

Panel header = new Panel { Height = 60, BackColor = Color.Navy };
Panel footer = new Panel { Height = 30, BackColor = Color.Gray };
Panel sidebar = new Panel { Width = 200, BackColor = Color.LightGray };
Panel content = new Panel { BackColor = Color.White };

this.Controls.AddRange(new Control[] { header, footer, sidebar, content });

borderLayout.SetPosition(header, BorderPosition.North);
borderLayout.SetPosition(footer, BorderPosition.South);
borderLayout.SetPosition(sidebar, BorderPosition.West);
borderLayout.SetPosition(content, BorderPosition.Center);

使用する場面： ヘッダーとフッターが固定され、サイドバーのあるアプリケーションのメインウィンドウ。

マルチステップウィザード（CardLayout）

上記のクイックスタートの例を参照してください。ウィザードの各ステップ間を移動できるように、「次へ」／「前へ」ボタンを追加します。

レスポンシブツールバー（FlowLayout）

上記のクイックスタートの例を参照してください。ウィンドウのサイズ変更時に、ボタンは自動的に折り返されます。

ログインフォーム（GridBagLayout）

// Labels in column 0, fields in column 1
// Submit button spans both columns
// All elements properly aligned and spaced

完全な例については、GridBagLayout のリファレンスを参照してください。

---

主なプロパティ

すべてのレイアウトに共通

プロパティ	型	説明
ContainerControl	Control	レイアウトが適用されるコンテナー（Panel、Form）

BorderLayout

プロパティ	型	説明
HGap	int	領域間の水平方向の間隔
VGap	int	領域間の垂直方向の間隔

CardLayout

プロパティ	型	説明
LayoutMode	CardLayoutMode	Default または Fill
SelectedCard	Control	現在表示されているカード（デザイナー）

FlowLayout

プロパティ	型	説明
LayoutMode	FlowLayoutMode	水平または垂直
Alignment	FlowAlignment	Near、Far、Center、ChildConstraints
ReverseRows	bool	フローの方向を反転
AutoHeight	bool	折り返しに合わせて高さを自動調整
HGap	int	コントロール間の水平方向の間隔
VGap	int	コントロール間の垂直方向の間隔

GridLayout

プロパティ	型	説明
Rows	int	行数
Columns	int	列数
HGap	int	セル間の水平方向の間隔
VGap	int	セル間の垂直方向の間隔

GridBagLayout

プロパティ	型	説明
(子ごとに設定する制約)	GridBagConstraints	GridBagLayout のリファレンスを参照

---

一般的な使用例

1. アプリケーションのメインウィンドウ

シナリオ： ヘッダー、フッター、サイドバー、コンテンツ領域。

• BorderLayout を使用します
• North：ヘッダー、South：フッター、West：サイドバー、Center：コンテンツ
• 参照：border-layout.md

2. セットアップウィザード

シナリオ： 複数のステップで構成される設定ウィザード。

• CardLayout を使用します
• 各カードを1つのステップとして、「次へ」／「前へ」ボタンで移動します
• 参照：card-layout.md

3. 自動折り返し付きツールバー

シナリオ： 次の行に折り返す水平ツールバー。

• FlowLayout（水平モード）を使用します
• AutoHeight = true に設定します
• 参照：flow-layout.md

4. 電卓のキーパッド

シナリオ： 4x4 のボタングリッド。

• GridLayout（4行、4列）を使用します
• または、ボタンのサイズを変える場合は GridBagLayout を使用します
• 参照：grid-layout.md または grid-bag-layout.md

5. データ入力フォーム

シナリオ： 左側にラベル、右側に入力欄を配置します。

• GridBagLayout を使用します
• 列0：ラベル（右揃え）、列1：入力欄（水平方向に拡張）
• 参照：grid-bag-layout.md

6. タグクラウド

シナリオ： フローして折り返すタグ。

• FlowLayout（水平モード）を使用します
• Label コントロールを動的に追加します
• 参照：flow-layout.md

---

イベント

共通のレイアウトイベント：

• LayoutComplete - レイアウトの再計算が完了したときに発生します

flowLayout.LayoutComplete += (sender, e) => {
    // Layout has been recalculated
};

---

ベストプラクティス

1. レイアウトの選択： 上記の選択ガイドを使用して、適切なレイアウトの種類を選びます
2. コンテナーの要件： ContainerControl プロパティ（Panel、Form）を必ず設定します
3. 子コントロールの追加順序： 制約を設定する前に、子コントロールをコンテナーに追加します
4. ほとんどの場合は FlowLayout： 迷った場合は、最も汎用性の高い FlowLayout から始めます
5. 複雑なフォームには GridBagLayout： 業務向けのデータ入力フォームに使用します
6. 間隔の一貫性： HGap/VGap を使用して、間隔を統一します
7. デザイナーのサポート： 迅速なプロトタイピングにはデザイナーを、動的なレイアウトにはコードを使用します
8. 制約オブジェクト： 類似したコントロールには、GridBagConstraints オブジェクトを再利用します
9. サイズ変更のテスト： コンテナーのサイズを変えて、レイアウトを必ずテストします
10. ドキュメント： 保守性を高めるため、制約の設定にコメントを付けます

---

関連項目

• Syncfusion レイアウトマネージャーのドキュメント
• BorderLayout API リファレンス
• CardLayout API リファレンス
• FlowLayout API リファレンス
• GridLayout API リファレンス
• GridBagLayout API リファレンス