syncfusion-winforms-flow-layout

Syncfusion Windows Forms FlowLayout の実装

FlowLayout コンポーネントを使いこなし、Windows Forms アプリケーションで柔軟な自動コントロール配置を実現します。FlowLayout は、利用可能なスペースに応じて子コンポーネントを水平方向または垂直方向に配置するため、レスポンシブなフォーム設計に最適です。

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

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

• コントロールを自動的に配置する（水平方向または垂直方向のフロー）
• 子コントロール間の間隔を管理する（水平および垂直の間隔）
• レイアウトの行または列内でコントロールの配置を設定する
• 複雑でサイズ変更可能なフォーム向けに、制約ベースのレイアウトを構成する
• フロー方向を制御する（逆方向のフローオプション）
• コンテナーの内容に応じた自動サイズ調整を有効にする
• 特定のコントロールがレイアウトに参加しないようにする
• コンテナーのサイズ変更に対応するレスポンシブデザインを作成する

コンポーネントの概要

FlowLayout は、子コントロールを単一方向のフローパターンで自動的に配置するレイアウトマネージャーです。絶対配置とは異なり、FlowLayout には次の特長があります。

• 自動配置：コントロールは水平方向または垂直方向に流れ、自動的に折り返されます
• 柔軟な間隔：コントロール間の間隔を設定できます
• スマートな配置：中央、左／右、または制約ベースの配置が可能です
• レスポンシブなサイズ調整：コントロールがあふれたときに高さを自動調整します
• 制約システム：個々のコントロールの配置を細かく制御できます

主な機能

• レイアウトモード：水平方向（既定）または垂直方向の配置
• 間隔の制御：水平（HGap）と垂直（VGap）の間隔を個別に設定
• 自動サイズ変更：AutoHeight プロパティでコンテナーの高さを自動調整
• 方向の制御：ReverseRows でフロー方向を反転（RTL／BTL）
• 配置オプション：中央、Near、Far、または ChildConstraints ベースの配置
• 子コントロールの制約：コントロールごとの HAlign、VAlign、NewLine、および比例サイズ設定
• レイアウトへの参加：レイアウトに含めるコントロールと除外するコントロールを選択

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

はじめに

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

アセンブリの要件、セットアップ方法、FlowLayout の基本的な実装について説明します。

• アセンブリ参照とパッケージの要件
• デザイナーを使用する方法とコードを使用する方法でのセットアップ
• ContainerControl プロパティの設定
• レイアウトへの子コントロールの追加
• レイアウトモード（Horizontal／Vertical）の選択

読むタイミング： FlowLayout を初めて実装する前

---

レイアウトモードと方向

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

コントロールのフロー方法を設定し、方向を反転します。

• LayoutMode プロパティ（水平方向と垂直方向）
• 右から左、または下から上へのフローを設定する ReverseRows プロパティ
• コントロールを動的に含めたり除外したりする ParticipateInLayout メソッド
• 実行時のレイアウトモードの切り替え
• 各レイアウトモードの使用例

読むタイミング： コントロールの配置方法を変更するとき、または方向を制御する必要があるとき

---

間隔とサイズ調整

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

コントロール間の間隔と、コンテナーの自動サイズ調整を管理します。

• 水平方向の間隔を設定する HGap プロパティ
• 垂直方向の間隔を設定する VGap プロパティ
• コンテナーの高さを自動調整する AutoHeight
• あふれが発生したときのコンテナーの動作
• レスポンシブなレイアウトパターン

読むタイミング： コントロール間の間隔を調整するとき、またはレスポンシブなサイズ調整を有効にするとき

---

配置オプション

📄 参照先： references/alignment-options.md

コントロールの配置とレイアウト方式を設定します。

• シンプルな配置モード（Center、Near、Far）
• ChildConstraints ベースの配置システム
• 各配置方法を使用する場面
• 配置方式の切り替え
• 境界ケースと特殊な状況

読むタイミング： コントロールを中央揃えにするとき、行を均等配置するとき、または制約ベースのレイアウトを使用するとき

---

子コントロールの制約

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

高度なレイアウトシナリオ向けに、コントロールごとの制約を適用します。

• 個々のコントロールの配置に使う HAlign と VAlign
• 領域を配分する Justify オプション
• 特定のコントロールを含める／除外する Active プロパティ
• 行／列の改行を強制する NewLine プロパティ
• ProportionalRowHeight と ProportionalColWidth
• SetConstraints メソッドと GetConstraints メソッド
• 複雑なフォームレイアウトパターン
• コントロールのプログラムによる並べ替え

参照するタイミング： コントロールごとに異なる配置要件を持つ複雑なフォームを作成するとき

---

クイックスタートの例

// Basic horizontal layout with buttons
using Syncfusion.Windows.Forms.Tools;

public partial class MyForm : Form
{
    private FlowLayout flowLayout1;
    
    public MyForm()
    {
        InitializeComponent();
        
        // Create and configure FlowLayout
        flowLayout1 = new FlowLayout();
        flowLayout1.ContainerControl = this;
        flowLayout1.LayoutMode = FlowLayoutMode.Horizontal;
        flowLayout1.HGap = 10;
        flowLayout1.VGap = 10;
        
        // Create buttons
        Button btn1 = new Button { Text = "Button 1", Size = new Size(80, 30) };
        Button btn2 = new Button { Text = "Button 2", Size = new Size(80, 30) };
        Button btn3 = new Button { Text = "Button 3", Size = new Size(80, 30) };
        
        // Add to form (automatically laid out)
        this.Controls.Add(btn1);
        this.Controls.Add(btn2);
        this.Controls.Add(btn3);
    }
}

結果： 3つのボタンが水平方向に配置され、10ピクセル間隔が空きます。スペースが限られると、次の行に自動的に折り返されます。

よく使われるパターン

横向きのボタンバー

flowLayout1.LayoutMode = FlowLayoutMode.Horizontal;
flowLayout1.Alignment = FlowAlignment.Near;
flowLayout1.HGap = 5;
flowLayout1.VGap = 5;

縦向きのコントロールリスト

flowLayout1.LayoutMode = FlowLayoutMode.Vertical;
flowLayout1.Alignment = FlowAlignment.Center;
flowLayout1.HGap = 10;
flowLayout1.VGap = 5;

レスポンシブなフォームレイアウト

flowLayout1.Alignment = FlowAlignment.ChildConstraints;
flowLayout1.AutoHeight = true;
// Set per-control constraints using SetConstraints()

右から左へのフロー

flowLayout1.ReverseRows = true;
flowLayout1.LayoutMode = FlowLayoutMode.Horizontal;

主要プロパティの一覧

プロパティ	型	用途
LayoutMode	FlowLayoutMode	水平方向または垂直方向の配置
Alignment	FlowAlignment	中央、Near、Far、または ChildConstraints
HGap	int	コントロール間の水平方向の間隔
VGap	int	コントロール間の垂直方向の間隔
AutoHeight	bool	コンテナーの高さの自動調整を有効化
ReverseRows	bool	フローの方向を逆にする（RTL/BTL）
ContainerControl	Control	子コントロールを保持するコンテナー

よくある使用例

データ入力フォーム

入力フィールド、ラベル、ボタンを自動的に折り返し、制約に基づいて配置して、レスポンシブなフォームレイアウトを作成します。

ツールボタンバー

ウィンドウサイズの変更に応じて、適切に折り返される動的なボタンコレクションを作成します。

オプションパネル

チェックボックスとラジオボタンを自動サイズ調整で垂直方向に整理します。

レスポンシブなダッシュボード

FlowLayout とパネルを組み合わせて、コンテンツのサイズを適切に変更する柔軟なダッシュボードレイアウトを構築します。

設定ダイアログ

制約に基づくレイアウトを使用して、複雑な配置要件を持つダイアログフォームを構築します。

---

次へ： 要件に応じて上記のリファレンスを選ぶか、初めて実装する場合は「はじめに」から始めてください。