syncfusion-winforms-grid-bag-layout

Windows Forms での GridBagLayout の実装

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

次のような場合に、このスキルを使用してください。

• 複数の子コントロールを柔軟なグリッドレイアウトに配置する
• 複数の行や列にまたがるレスポンシブなレイアウトを作成する
• コントロールの位置、サイズ、配置を設定する
• 単純なグリッドやフローレイアウトを超える複雑なコントロールレイアウトを管理する
• 子コントロールを正確な位置に配置するための制約を設定する
• ウィザードのナビゲーションボタンや電卓のボタングリッドのようなレイアウトを作成する

GridBagLayout は、次のようなレイアウトに最適です。

• コントロールごとに行や列のサイズを変える必要がある
• コントロールが複数のセルにまたがる必要がある
• 間隔や配置を細かく制御する必要がある
• 複雑な入れ子のレイアウトが必要である

コンポーネントの概要

GridBagLayout は、子コントロールを仮想グリッドに配置するレイアウトマネージャーです。次の特徴があります。

• 行と列のサイズは可変です（GridLayout とは異なります）
• 個々のコントロールを複数のセルにまたがらせることができます
• 各コントロールの位置とサイズは制約によって決まります
• 余分なスペースはウェイトプロパティに基づいて配分されます

主な機能

• グリッド配置：特定のグリッド座標にコントロールを配置します
• セルの結合：コントロールが複数の行や列を占有できるようにします
• ウェイト配分：余分なスペースの割り当て方法を制御します
• アンカーと塗りつぶし：割り当てられた領域内でコントロールを配置およびサイズ変更します
• 間隔の制御：コントロールの周囲にパディングとインセットを追加します

ドキュメントガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリの配置と NuGet パッケージ
• GridBagLayout を使用した Windows Forms プロジェクトの作成
• デザイナーを使ったコントロールの追加
• C# および VB.NET でのプログラムによるコントロールの追加

グリッド配置とレイアウト構造

📄 参照： references/grid-positioning.md

• 仮想グリッドの概念
• GridPostX プロパティと GridPostY プロパティ
• コントロールのグリッド座標の設定
• 同じセル内でのコントロールの重ね合わせ

サイズとスペースの配分

📄 参照： references/sizing-and-spacing.md

• WeightX プロパティと WeightY プロパティ
• ウェイトがスペースの配分に与える影響
• ウェイトと列・行の対応付け
• GetLayoutWeights() メソッドの使用方法

アンカーと塗りつぶしの動作

📄 参照： references/anchoring-and-fill.md

• Anchor プロパティと配置オプション
• Fill プロパティ（None、Both、Horizontal、Vertical）
• コントロール周囲のパディング用インセット
• 推奨サイズを調整する IPadX と IPadY

子コントロールの制約

📄 参照： references/child-control-constraints.md

• 複数セルにまたがるコントロール用の CellSpanX と CellSpanY
• GridBagConstraints オブジェクトの構造
• プログラムで設定する SetConstraints() メソッド
• GetConstraints() メソッドと GetConstraintsRef() メソッド
• デザイナーによる制約設定とコードによる制約設定

クイックスタートの例

2×2 のボタングリッドを作成する簡単な例を示します。

// Create layout manager
GridBagLayout gridBagLayout1 = new GridBagLayout();
gridBagLayout1.ContainerControl = this;

// Create buttons
ButtonAdv button1 = new ButtonAdv { Text = "Button 1" };
ButtonAdv button2 = new ButtonAdv { Text = "Button 2" };
ButtonAdv button3 = new ButtonAdv { Text = "Button 3" };
ButtonAdv button4 = new ButtonAdv { Text = "Button 4" };

// Add to form
this.Controls.Add(button1);
this.Controls.Add(button2);
this.Controls.Add(button3);
this.Controls.Add(button4);

// Set constraints: (gridPosX, gridPosY, cellSpanX, cellSpanY, weightX, weightY, anchor, fill, insets, iPadX, iPadY)
gridBagLayout1.SetConstraints(button1, new GridBagConstraints(0, 0, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, new Insets(0, 0, 0, 0), 0, 0, false));
gridBagLayout1.SetConstraints(button2, new GridBagConstraints(1, 0, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, new Insets(0, 0, 0, 0), 0, 0, false));
gridBagLayout1.SetConstraints(button3, new GridBagConstraints(0, 1, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, new Insets(0, 0, 0, 0), 0, 0, false));
gridBagLayout1.SetConstraints(button4, new GridBagConstraints(1, 1, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, new Insets(0, 0, 0, 0), 0, 0, false));

よくあるパターン

パターン 1：同じサイズのグリッド

すべてのコントロールに同じウェイトと Fill.Both を設定し、均等に配置します。

gridBagLayout1.SetConstraints(control, new GridBagConstraints(x, y, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, ...));

パターン 2：複数の列にまたがるコントロール

CellSpanX を使用して、コントロールを複数の列にまたがらせます。

// Button spanning 3 columns
gridBagLayout1.SetConstraints(button1, new GridBagConstraints(0, 0, 3, 1, 1, 1, AnchorTypes.Center, FillType.Horizontal, ...));

パターン 3：非対称なスペース配分

異なるウェイト値を使用して、特定の列や行により多くのスペースを割り当てます。

gridBagLayout1.SetConstraints(button1, new GridBagConstraints(0, 0, 1, 1, 2, 1, AnchorTypes.Center, FillType.Both, ...)); // Column 0 gets 2x space
gridBagLayout1.SetConstraints(button2, new GridBagConstraints(1, 0, 1, 1, 1, 1, AnchorTypes.Center, FillType.Both, ...)); // Column 1 gets 1x space

パターン 4：塗りつぶしなしでのコントロールの配置

Fill.None とともに Anchor プロパティを使用して、サイズを変更せずにコントロールを配置します。

gridBagLayout1.SetConstraints(button1, new GridBagConstraints(0, 0, 1, 1, 1, 1, AnchorTypes.NorthEast, FillType.None, ...));

主な制約プロパティ

プロパティ	目的	一般的な値
GridPostX	列の位置	0, 1, 2, ...
GridPostY	行の位置	0, 1, 2, ...
CellSpanX	またがる列数	1, 2, 3, ...
CellSpanY	またがる行数	1, 2, 3, ...
WeightX	水平方向のスペースの重み	0, 1, 2, またはカスタム値
WeightY	垂直方向のスペースの重み	0, 1, 2, またはカスタム値
Anchor	セル内の配置	Center、North、East、South、NorthEast など
Fill	サイズ変更時の動作	None、Both、Horizontal、Vertical
Insets	コントロールの周囲のパディング	new Insets(top, left, bottom, right)
IPadX	幅のパディング	0-100+
IPadY	高さのパディング	0-100+

よくある使用例

ウィザードのボタンナビゲーション

• 下部に複数のボタンを水平方向に配置
• CellSpanX と同じ重みを使用して均等に配置

電卓のボタングリッド

• 数値ボタンの 4×4 グリッド
• 同じ重みの 1×1 制約と Fill.Both を使用

ダイアログのボタンパネル

• OK、Cancel、Help ボタンを横一列に配置
• Anchor と Insets を使用してサイズを変える

複雑なフォームレイアウト

• ラベル、テキストボックス、ボタンを整理されたグリッドに配置
• CellSpanX を使用してコントロールを全幅にする
• 比例したサイズにするため、非対称の重みを使用