为何动态生成的IconButton未在FlowLayoutPanel中显示？

我尝试创建一个带有动态加载按钮的折叠面板，未来按钮标题会根据获取的信息动态变化。目前我希望生成的按钮样式为：左侧带有书本图标，文字居左排列，扁平风格，背景为白色，文字和图标为灰色。

我已尝试编写以下代码：

Forms1.cs #

// Forms1.cs

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            int buttonCount = 3;
            var buttons = new FontAwesome.Sharp.IconButton[buttonCount];
            for (int i = 0; i < buttonCount; i++)
            {
                var btn = new FontAwesome.Sharp.IconButton
                {
                    Text = "Button " + i,
                    TextAlign = ContentAlignment.MiddleLeft,
                    IconChar = FontAwesome.Sharp.IconChar.Book,
                    IconColor = ColorTranslator.FromHtml("#6A6A73"),
                    IconSize = 20,
                    IconFont = FontAwesome.Sharp.IconFont.Auto,
                    TextImageRelation = TextImageRelation.ImageBeforeText,
                    FlatStyle = FlatStyle.Flat
                };
                btn.FlatAppearance.BorderSize = 0;
                btn.ForeColor = ColorTranslator.FromHtml("#6A6A73");
                btn.BackColor = ColorTranslator.FromHtml("#FDFEFF");
                btn.Dock = DockStyle.Top;
                buttons[i] = btn;
            }
            flowLayoutPanel1.Controls.AddRange(buttons);
        }
    }
}

Forms1.Designer.cs #

// Forms1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.flowLayoutPanel1 = new System.Windows.Forms.FlowLayoutPanel();
            this.SuspendLayout();
            // 
            // flowLayoutPanel1
            // 
            this.flowLayoutPanel1.BackColor = System.Drawing.SystemColors.ControlLight;
            this.flowLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Left;
            this.flowLayoutPanel1.Location = new System.Drawing.Point(0, 0);
            this.flowLayoutPanel1.Name = "flowLayoutPanel1";
            this.flowLayoutPanel1.Size = new System.Drawing.Size(200, 450);
            this.flowLayoutPanel1.TabIndex = 0;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.flowLayoutPanel1);
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.FlowLayoutPanel flowLayoutPanel1;
    }
}

但运行应用程序后，按钮并未显示，左侧的FlowLayoutPanel区域为空，没有任何按钮出现。请问我哪里出错了？

问题出在FlowLayoutPanel的布局设置和按钮的属性配置上，具体原因及修复方法如下：

• 布局方向冲突：FlowLayoutPanel默认是水平布局，而你给按钮设置了Dock = DockStyle.Top，这会导致按钮布局异常，无法正常显示。需要将FlowLayoutPanel的布局方向改为垂直（TopDown），同时移除按钮的Dock属性。
• 未设置按钮尺寸：FlowLayoutPanel无法自动计算按钮的默认大小，导致按钮被压缩至不可见，需要手动设置按钮的Size和Margin来保证显示效果。

修改后的代码如下：

private void Form1_Load(object sender, EventArgs e)
{
    int buttonCount = 3;
    // 配置FlowLayoutPanel为垂直布局，禁止换行
    flowLayoutPanel1.FlowDirection = FlowDirection.TopDown;
    flowLayoutPanel1.WrapContents = false;
    var buttons = new FontAwesome.Sharp.IconButton[buttonCount];
    for (int i = 0; i < buttonCount; i++)
    {
        var btn = new FontAwesome.Sharp.IconButton
        {
            Text = "Button " + i,
            TextAlign = ContentAlignment.MiddleLeft,
            IconChar = FontAwesome.Sharp.IconChar.Book,
            IconColor = ColorTranslator.FromHtml("#6A6A73"),
            IconSize = 20,
            IconFont = FontAwesome.Sharp.IconFont.Auto,
            TextImageRelation = TextImageRelation.ImageBeforeText,
            FlatStyle = FlatStyle.Flat,
            // 设置按钮尺寸，适配FlowLayoutPanel宽度
            Size = new Size(flowLayoutPanel1.ClientSize.Width - 10, 40),
            Margin = new Padding(5) // 增加按钮间的间距
        };
        btn.FlatAppearance.BorderSize = 0;
        btn.ForeColor = ColorTranslator.FromHtml("#6A6A73");
        btn.BackColor = ColorTranslator.FromHtml("#FDFEFF");
        buttons[i] = btn;
    }
    flowLayoutPanel1.Controls.AddRange(buttons);
}

额外检查项 #

• 确认已安装FontAwesome.SharpNuGet包：右键项目→管理NuGet程序包，搜索并安装该包，否则图标按钮无法正常渲染。
• 验证Form1_Load事件绑定：在Form设计器中选中Form1，打开属性窗口的事件面板，确认Load事件已关联到Form1_Load方法。

修改后运行程序，按钮即可按照预期显示在左侧的FlowLayoutPanel中。

内容的提问来源于stack exchange，提问作者mj balcueva