syncfusion-winforms-flow-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Windows Forms FlowLayout

实现Syncfusion Windows Forms FlowLayout

Master the FlowLayout component to create flexible, automatic control layouts in Windows Forms applications. FlowLayout arranges child components horizontally or vertically based on available space, making it ideal for responsive form design.

掌握FlowLayout组件，即可在Windows Forms应用中创建灵活的自动控件布局。FlowLayout会根据可用空间水平或垂直排列子组件，非常适合用于响应式表单设计。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Arrange controls automatically in horizontal or vertical flows
Manage spacing between child controls with horizontal and vertical gaps
Configure alignment for controls within layout rows or columns
Set up constraint-based layouts for complex, resizable forms
Control layout direction with reverse flow options
Enable auto-sizing of containers based on content
Prevent specific controls from participating in the layout
Create responsive designs that adapt to container resizing

当你需要完成以下需求时可以使用本技能：

自动排列控件 按水平或垂直流向排布
管理子控件间距 配置水平和垂直方向的间隙
配置对齐方式 调整布局行或列内控件的对齐规则
搭建基于约束的布局 适配复杂可调整大小的表单
控制布局方向 支持反向流动选项
启用容器自适应大小 根据内容自动调整容器尺寸
排除指定控件 让特定控件不参与布局计算
创建响应式设计 适配容器大小变化

Component Overview

组件概述

The

FlowLayout

is a layout manager that automatically positions child controls in a single-direction flow pattern. Unlike absolute positioning, FlowLayout provides:

Automatic arrangement: Controls flow horizontally or vertically with automatic wrapping
Flexible spacing: Configure gaps between controls
Smart alignment: Center, left/right, or constrained-based positioning
Responsive sizing: Auto-height adjustment when controls overflow
Constraint system: Fine-grained control over individual control placement

FlowLayout

是一款布局管理器，可按照单一流向模式自动定位子控件。和绝对定位不同，FlowLayout提供以下能力：

自动排列：控件按水平或垂直流向排布，支持自动换行
灵活间距：可自定义控件之间的间隙
智能对齐：支持居中、左/右对齐或基于约束的定位
响应式大小：控件溢出时自动调整高度
约束系统：可精细化控制单个控件的放置规则

Key Features

核心特性

Layout Modes: Horizontal (default) or vertical arrangement
Spacing Control: Separate horizontal (HGap) and vertical (VGap) gaps
Auto-Resizing: AutoHeight property adjusts container height automatically
Directional Control: ReverseRows reverses the flow direction (RTL/BTL)
Alignment Options: Center, Near, Far, or ChildConstraints-based alignment
Child Constraints: Per-control HAlign, VAlign, NewLine, and proportional sizing
Layout Participation: Selectively include/exclude controls from layout

布局模式：水平（默认）或垂直排列
间距控制：支持单独配置水平（HGap）和垂直（VGap）间隙
自适应大小：AutoHeight属性可自动调整容器高度
方向控制：ReverseRows可反转流向（从右到左/从下到上）
对齐选项：居中、靠近、远离或基于ChildConstraints的对齐
子控件约束：支持单个控件的水平对齐、垂直对齐、强制换行和比例大小设置
布局参与规则：可选择性指定控件是否参与布局计算

Documentation Navigation Guide

文档导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Learn assembly requirements, setup methods, and basic FlowLayout implementation:

Assembly references and package requirements
Designer-based and code-based setup approaches
Setting ContainerControl property
Adding child controls to the layout
Selecting layout mode (Horizontal/Vertical)

When to read: Before implementing FlowLayout for the first time

📄 阅读： references/getting-started.md

了解程序集要求、设置方法和FlowLayout基础实现：

程序集引用和包依赖要求
基于设计器和基于代码的两种搭建方式
设置ContainerControl属性
向布局中添加子控件
选择布局模式（水平/垂直）

阅读时机： 首次实现FlowLayout之前

Layout Modes and Direction

布局模式和方向

📄 Read: references/layout-modes.md

Configure how controls flow and reverse the direction:

LayoutMode property (Horizontal vs Vertical)
ReverseRows property for right-to-left or bottom-to-top flow
ParticipateInLayout method to include/exclude controls dynamically
Switching between layout modes at runtime
Use cases for each layout mode

When to read: When changing how controls are arranged or need directional control

📄 阅读： references/layout-modes.md

配置控件流向和反转方向：

LayoutMode属性（水平vs垂直）
ReverseRows属性实现从右到左或从下到上的流向
ParticipateInLayout方法可动态添加/移除参与布局的控件
运行时切换布局模式
不同布局模式的适用场景

阅读时机： 需要调整控件排列方式或控制流向时

Spacing and Sizing

间距和大小

📄 Read: references/spacing-and-sizing.md

Manage gaps between controls and container auto-sizing:

HGap property for horizontal spacing
VGap property for vertical spacing
AutoHeight for automatic container height adjustment
Container behavior during overflow
Responsive layout patterns

When to read: When adjusting control spacing or enabling responsive sizing

📄 阅读： references/spacing-and-sizing.md

管理控件间间隙和容器自适应大小：

HGap属性配置水平间距
VGap属性配置垂直间距
AutoHeight实现容器高度自动调整
溢出时的容器行为
响应式布局模式

阅读时机： 需要调整控件间距或启用响应式大小调整时

Alignment Options

对齐选项

📄 Read: references/alignment-options.md

Configure control alignment and layout strategies:

Simple alignment modes (Center, Near, Far)
ChildConstraints-based alignment system
When to use each alignment approach
Switching between alignment types
Edge cases and special scenarios

When to read: When centering controls, justifying rows, or using constraint-based layouts

📄 阅读： references/alignment-options.md

配置控件对齐方式和布局策略：

基础对齐模式（居中、靠近、远离）
基于ChildConstraints的对齐系统
不同对齐方式的适用场景
对齐类型切换方法
边界情况和特殊场景处理

阅读时机： 需要居中控件、调整行对齐方式或使用基于约束的布局时

Child Control Constraints

子控件约束

📄 Read: references/child-control-constraints.md

Apply per-control constraints for advanced layout scenarios:

HAlign and VAlign for individual control positioning
Justify option with space distribution
Active property to include/exclude specific controls
NewLine property to force row/column breaks
ProportionalRowHeight and ProportionalColWidth
SetConstraints and GetConstraints methods
Complex form layout patterns
Rearranging controls programmatically

When to read: When building complex forms with varied control alignment needs

📄 阅读： references/child-control-constraints.md

为单个控件配置约束以适配高级布局场景：

单个控件定位的水平对齐和垂直对齐设置
支持空间分布的对齐选项
Active属性可包含/排除指定控件
NewLine属性强制换行/换列
比例行高和比例列宽设置
SetConstraints和GetConstraints方法
复杂表单布局模式
编程方式重排控件

阅读时机： 搭建有多样化控件对齐需求的复杂表单时

Quick Start Example

快速入门示例

csharp

// 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);
    }
}

Result: Three buttons arranged horizontally with 10-pixel gaps, automatically wrapping to the next row when space is limited.

csharp

// 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);
    }
}

效果： 三个按钮按水平方向排列，间距10像素，空间不足时自动换行到下一行。

Common Patterns

常用模式

Horizontal Button Bar

水平按钮栏

csharp

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

csharp

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

Vertical Control List

垂直控件列表

csharp

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

csharp

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

Responsive Form Layout

响应式表单布局

csharp

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

csharp

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

Right-to-Left Flow

从右到左流向

csharp

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

csharp

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

Key Properties Reference

核心属性参考

Property	Type	Purpose
`LayoutMode`	FlowLayoutMode	Horizontal or Vertical arrangement
`Alignment`	FlowAlignment	Center, Near, Far, or ChildConstraints
`HGap`	int	Horizontal spacing between controls
`VGap`	int	Vertical spacing between controls
`AutoHeight`	bool	Enable automatic container height adjustment
`ReverseRows`	bool	Reverse flow direction (RTL/BTL)
`ContainerControl`	Control	The container holding child controls

属性	类型	用途
`LayoutMode`	FlowLayoutMode	水平或垂直排列
`Alignment`	FlowAlignment	居中、靠近、远离或基于子控件约束
`HGap`	int	控件间水平间距
`VGap`	int	控件间垂直间距
`AutoHeight`	bool	启用容器高度自动调整
`ReverseRows`	bool	反转流向（从右到左/从下到上）
`ContainerControl`	Control	承载子控件的容器

Common Use Cases

常见使用场景

Data Entry Forms

数据录入表单

Arrange input fields, labels, and buttons with automatic wrapping and constraint-based alignment for responsive form layouts.

通过自动换行和基于约束的对齐方式排列输入框、标签和按钮，实现响应式表单布局。

Tool Button Bars

工具按钮栏

Create dynamic button collections that wrap intelligently as window size changes.

创建动态按钮集合，窗口大小变化时可智能换行。

Option Panels

选项面板

Organize checkboxes and radio buttons vertically with auto-sizing.

垂直排列复选框和单选按钮，支持自适应大小。

Responsive Dashboards

响应式仪表盘

Combine FlowLayout with panels to build flexible dashboard layouts that resize content intelligently.

结合FlowLayout和面板搭建灵活的仪表盘布局，可智能调整内容大小。

Configuration Dialogs

配置对话框

Build dialog forms with complex alignment requirements using constraint-based layouts.

Next: Choose a reference above based on your needs, or start with Getting Started for first-time implementation.

使用基于约束的布局搭建有复杂对齐需求的对话框表单。

后续步骤： 根据你的需求选择上方的参考文档，首次实现建议从入门指南开始。