syncfusion-winforms-border-layout

Syncfusion Windows Forms BorderLayout の実装

BorderLayout は Windows Forms のレイアウトマネージャーで、.NET Framework に組み込まれているドッキング機能と同様に、子コントロールを境界（North、South、East、West）から中央に向かって配置できます。自動レイアウトマネージャーとは異なり、BorderLayout では配置を明示的に制御できます。

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

• 境界領域を使ったレイアウト：境界沿いと中央領域にコントロールを配置する必要がある場合
• 上部／下部のヘッダー／フッター：固定ヘッダー（North）と固定フッター（South）の間にコンテンツを配置したい場合
• 左側／右側のサイドバー：左または右にサイドバーパネルを配置し、中央にメインコンテンツを置く必要がある場合
• 間隔の制御：HGap と VGap を使ってコントロール間の間隔を正確に調整する必要がある場合
• デザイナーまたはコードベースのレイアウト：デザイナーで UI を構築する場合も、C#/VB.NET でプログラムから構築する場合も
• ドッキングの代替：Windows Forms のドッキングよりも構造化された方法を使いたい場合

コンポーネントの概要

主な機能：

• 5 つの位置を使ったレイアウト：子コントロールの位置として North、South、East、West、Center を指定
• 間隔の設定：コントロール間の水平方向（HGap）と垂直方向（VGap）の間隔をカスタマイズ
• デザイナーのサポート：Visual Studio デザイナーで BorderLayout と子コントロールを追加
• コードによる作成：C# または VB.NET でプログラムから BorderLayout を作成、設定
• コンテナーコントロール：任意のコントロール（通常は Form）を BorderLayout のコンテナーに設定

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

はじめに

📄 参照先： references/getting-started.md

• アセンブリと NuGet パッケージのセットアップ
• デザイナーでの BorderLayout の作成
• コードによる BorderLayout の作成（C# および VB.NET）
• 子コントロールの追加
• コンテナーのセットアップ

コントロールの配置

📄 参照先： references/positioning-controls.md

• コントロールの位置（North、South、East、West、Center）の設定
• SetPosition() メソッドの使用方法
• BorderPosition 列挙型
• 同じ位置に複数のコントロールを配置
• 各位置のコード例
• 一般的な位置の設定

間隔の設定

📄 参照先： references/spacing-configuration.md

• HGap プロパティ（水平間隔）
• VGap プロパティ（垂直間隔）
• デザイナーでの間隔の設定
• コードでの間隔の設定（C# および VB.NET）
• レスポンシブな間隔のパターン

レイアウトパターン

📄 参照先： references/layout-patterns.md

• 一般的なレイアウト（ヘッダー／フッター、サイドバー、マルチパネル）
• ベストプラクティスとパターン
• レスポンシブ対応に関する考慮事項
• BorderLayout と他の方法の使い分け
• 完全な動作例

クイックスタート

最小限の BorderLayout 設定は次のとおりです。

using Syncfusion.Windows.Forms.Tools;

// In your form
BorderLayout borderLayout1 = new BorderLayout();
this.borderLayout1.ContainerControl = this;

// Add controls
ButtonAdv topButton = new ButtonAdv() { Text = "Header", Dock = DockStyle.Top };
ButtonAdv leftButton = new ButtonAdv() { Text = "Sidebar", Dock = DockStyle.Left };
ButtonAdv centerButton = new ButtonAdv() { Text = "Content", Dock = DockStyle.Fill };

this.Controls.Add(topButton);
this.Controls.Add(leftButton);
this.Controls.Add(centerButton);

// Set positions
borderLayout1.SetPosition(topButton, BorderPosition.North);
borderLayout1.SetPosition(leftButton, BorderPosition.West);
borderLayout1.SetPosition(centerButton, BorderPosition.Center);

// Configure spacing
borderLayout1.HGap = 10;
borderLayout1.VGap = 10;

VB.NET の場合：

Imports Syncfusion.Windows.Forms.Tools

' In your form
Dim borderLayout1 As BorderLayout = New BorderLayout()
Me.borderLayout1.ContainerControl = Me

' Add controls
Dim topButton As ButtonAdv = New ButtonAdv() With {.Text = "Header", .Dock = DockStyle.Top}
Dim leftButton As ButtonAdv = New ButtonAdv() With {.Text = "Sidebar", .Dock = DockStyle.Left}
Dim centerButton As ButtonAdv = New ButtonAdv() With {.Text = "Content", .Dock = DockStyle.Fill}

Me.Controls.Add(topButton)
Me.Controls.Add(leftButton)
Me.Controls.Add(centerButton)

' Set positions
borderLayout1.SetPosition(topButton, BorderPosition.North)
borderLayout1.SetPosition(leftButton, BorderPosition.West)
borderLayout1.SetPosition(centerButton, BorderPosition.Center)

' Configure spacing
borderLayout1.HGap = 10
borderLayout1.VGap = 10

一般的なパターン

パターン 1：ヘッダー + コンテンツ + フッター

固定ヘッダー、スクロール可能なコンテンツ領域、固定フッターを使う、最も一般的なレイアウトです。

// Create panels for header, content, footer
Panel headerPanel = new Panel() { Height = 50 };
Panel contentPanel = new Panel();
Panel footerPanel = new Panel() { Height = 40 };

// Add to form
this.Controls.Add(headerPanel);
this.Controls.Add(contentPanel);
this.Controls.Add(footerPanel);

// Position with BorderLayout
borderLayout1.SetPosition(headerPanel, BorderPosition.North);
borderLayout1.SetPosition(footerPanel, BorderPosition.South);
borderLayout1.SetPosition(contentPanel, BorderPosition.Center);

パターン 2：サイドバー + コンテンツ

左側にサイドバー、中央にメインコンテンツ領域を配置します。

// Create sidebar and content panels
Panel sidebarPanel = new Panel() { Width = 200 };
Panel contentPanel = new Panel();

this.Controls.Add(sidebarPanel);
this.Controls.Add(contentPanel);

// Position
borderLayout1.SetPosition(sidebarPanel, BorderPosition.West);
borderLayout1.SetPosition(contentPanel, BorderPosition.Center);

パターン 3：複数の境界を使ったレイアウト

複数の境界にコントロールを配置し、中央にコンテンツを置きます。

Panel top = new Panel() { Height = 40 };
Panel bottom = new Panel() { Height = 40 };
Panel left = new Panel() { Width = 150 };
Panel right = new Panel() { Width = 150 };
Panel center = new Panel();

this.Controls.Add(top);
this.Controls.Add(bottom);
this.Controls.Add(left);
this.Controls.Add(right);
this.Controls.Add(center);

borderLayout1.SetPosition(top, BorderPosition.North);
borderLayout1.SetPosition(bottom, BorderPosition.South);
borderLayout1.SetPosition(left, BorderPosition.West);
borderLayout1.SetPosition(right, BorderPosition.East);
borderLayout1.SetPosition(center, BorderPosition.Center);

主なプロパティ

プロパティ	型	説明
ContainerControl	Control	BorderLayout のコンテナーとして機能するコントロール
HGap	int	コントロール間の水平間隔
VGap	int	コントロール間の垂直間隔

主なメソッド

メソッド	パラメーター	説明
SetPosition()	Control, BorderPosition	子コントロールの境界位置を設定します

サポートされる位置（BorderPosition 列挙型）

• North - レイアウトの上部
• South - レイアウトの下部
• East - レイアウトの右側
• West - レイアウトの左側
• Center - 中央領域（残りのスペースを埋めます）