FlowLayoutPanel - 控件的自动宽度？

Question

是否可以使 FlowLayoutPanel 中插入的项目自动调整 FlowLayoutPanel 的大小？这是一个示例：

一个包含 1 个 FlowLayoutPanel 和 3 个按钮的表单：

如果我调整表单大小，控件看起来像这样：它们“从左到右”排列

我想要的是这样的：控件应该具有FlowLayoutPanel 的宽度：

有任何想法如何做到这一点吗？我更改了 FlowDirection 并使用了 Anchor 属性，但没有成功。

我当然可以在 FlowLayoutPanel_Resize 事件中调整控件的大小，但我想添加大约 500 个用户控件 - 我测试了它，它很慢。

Answer 1

在这种情况下，我建议您使用带有一列的 TableLayoutPanel。我发现 TableLayoutPanel 比 FlowLayoutPanel 更可预测、更可靠。

如果您仍想使用 FlowLayoutPanel，另一种选择是将第一个控件的宽度设置为所需的宽度，并对所有其他控件使用 Dock = Top。

Answer 2

这是一个简单的方法来做到这一点。
只需绑定 flowLayoutPannel 的 SizeChanged 事件并调整包含控件的大小即可。
喜欢：

private void myFlowLayoutPannel_SizeChanged(object sender, EventArgs e)
{
    myFlowLayoutPannel.SuspendLayout();
    foreach (Control ctrl in pnSMS.Controls)
    {
        if (ctrl is Button) ctrl.Width = pnSMS.ClientSize.Width;
    }
    myFlowLayoutPannel.ResumeLayout();
}

Answer 3

这里我有我的 StackPanel 类：

/// <summary>
/// A stackpanel similar to the Wpf stackpanel.
/// </summary>
public class StackPanel: FlowLayoutPanel
{
    public StackPanel(): base()
    {
        InitializeComponent();
        this.ForceAutoresizeOfControls = true;
    }

    private void InitializeComponent()
    {
        this.SuspendLayout();
        //
        // StackPanel
        //
        this.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
        this.WrapContents = false;
        this.ResumeLayout(false);
    }

    /// <summary>
    /// Override it just in order to hide it in design mode.
    /// </summary>
    [Browsable(false)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    public new bool WrapContents
    {
        get { return base.WrapContents; }
        set { base.WrapContents = value; }
    }

    /// <summary>
    /// Override it just in order to set its default value.
    /// </summary>
    [DefaultValue(typeof(AutoSizeMode), "GrowAndShrink")]
    public override AutoSizeMode AutoSizeMode
    {
        get { return base.AutoSizeMode; }
        set { base.AutoSizeMode = value; }
    }

    /// <summary>
    /// Get or set a value that when is true forces the resizing of each control.
    /// If this value is false then only control that have AutoSize == true will be resized to
    /// fit the client size of this container.
    /// </summary>
    [DefaultValue(true)]
    public bool ForceAutoresizeOfControls { get; set; }

    protected override void OnSizeChanged(EventArgs e)
    {
        base.OnSizeChanged(e);
        this.SuspendLayout();
        switch (FlowDirection)
        {
            case FlowDirection.BottomUp:
            case FlowDirection.TopDown:
                foreach (Control control in this.Controls)
                    if (ForceAutoresizeOfControls || control.AutoSize)
                        control.Width = this.ClientSize.Width - control.Margin.Left - control.Margin.Right;
                break;
            case FlowDirection.LeftToRight:
            case FlowDirection.RightToLeft:
                foreach (Control control in this.Controls)
                    if (ForceAutoresizeOfControls || control.AutoSize)
                        control.Height = this.ClientSize.Height - control.Margin.Top - control.Margin.Bottom;
                break;
            default:
                break;
        }
        this.ResumeLayout();
    }

    protected override void OnLayout(LayoutEventArgs levent)
    {
        base.OnLayout(levent);

        if (levent != null && levent.AffectedControl != null)
        {
            Control control = levent.AffectedControl;
            if (ForceAutoresizeOfControls || control.AutoSize)
            {
                switch (FlowDirection)
                {
                    case FlowDirection.BottomUp:
                    case FlowDirection.TopDown:
                        control.Width = this.ClientSize.Width - control.Margin.Left - control.Margin.Right;
                        break;
                    case FlowDirection.LeftToRight:
                    case FlowDirection.RightToLeft:
                        control.Height = this.ClientSize.Height - control.Margin.Top - control.Margin.Bottom;
                        break;
                    default:
                        break;
                }
            }
        }
    }
}

Answer 4

这里不需要 FlowLayoutPanel。

您应该能够使用普通的 Panel 控件执行您想要的操作。
将其固定在所有四个边，以便它随着您的形状延伸，然后添加按钮并将它们全部设置为“Dock: Top”。

编辑-回应@UsamaAziz 评论。

为了确保隐藏在面板底部之外的控件可以访问，请将面板的“AutoScroll”属性设置为 True。这将在需要时向面板添加垂直滚动条。

工作完成。

Answer 5

FlowLayoutPanel 根据 MSDN：

...对于垂直流动方向，FlowLayoutPanel 控件计算
隐含列的宽度来自最宽的子控件
列。此列中带有 Anchor 或 Dock 的所有其他控件
属性被对齐或拉伸以适合这个隐含的列。这
水平流动方向的行为方式类似。

这并不理想，但您可以本机执行此操作，只要将一个子控件设置为与容器相同的宽度，并将其余控件设置为 Dock 即可。

Answer 6

我建议...尝试使用按钮的锚点...尝试将其设置为

Button1.Anchor = (AnchoreStyle.Left or AnchoreStyle.Right)

或
在属性中设置它...

然后将其放入Panel而不是FlowLayoutPanel...；）

Answer 7

正如其他答案所述，面板本身足以处理您的按钮。一些对我有用的代码：

public class ButtonWindow : Panel
{
    public ButtonWindow()
    {
        Dock = DockStyle.Fill;
        AutoScroll = true;

        for (int i = 0; i < 500; i++) 
        {
           Button button = new Button() { Height = 100, Dock = DockStyle.Top };
           Controls.Add(button);
        }
    }
}

祝你有美好的一天。