c# - 对齐控件以在 FlowLayout 中居中

Question

我有一个流程布局如下：

我需要将表单上的所有控件居中（换句话说，假设表单的宽度为 200。btnOpt1 到 btnOpt4 的Left起点应该是 100 减去按钮宽度的一半，而不是 0。）

Answer 1

您可以通过两种方式做到这一点，但每种方式都有一些限制。

1. 使用Anchor属性
2. Docking在和Anchor属性的帮助下使用布局控件。

方法一：锚属性

控件默认锚定在表单的左上角，这意味着当表单大小发生变化时，它们与表单左上角的距离将保持不变。如果将控件锚点更改为左下角，则在调整窗体大小时，控件将与窗体的底部和左侧保持相同的距离。

关闭某个方向的锚点将使控件在调整大小时保持在该方向的中心。

例子 ：

public TestForm12()
{
   InitializeComponent();

   Button btn = new Button();
   btn.Width = this.Width - 10;
   btn.Height = 20;
   btn.Left = (this.ClientSize.Width - btn.Width) / 2;
   btn.Top = (this.ClientSize.Height - btn.Height) / 2;
   btn.Text = "click me";
   this.Controls.Add(btn);
   btn.Anchor = AnchorStyles.None;               

}

2.使用布局控件

1. 添加 TableLayout 控件，将其 Dock 属性设置为 Fill。
2. 添加 1 行大小类型样式百分比 100%
3. 添加 3 列 Column1（大小类型 - 百分比（100%）），Column2（大小类型 - 绝对（200px）），Column3（大小类型 - 百分比（100%））。
4. 现在将面板控件添加到 Column2 并将其 Dock 属性设置为 Fill
5. 将按钮添加到此控件并根据需要设置它们的大小并将它们的锚属性设置为 AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top

示例 - 表单的 Designer.cs 代码片段。

private void InitializeComponent()
 {
     this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
     this.panel1 = new System.Windows.Forms.Panel();
     this.button1 = new System.Windows.Forms.Button();
     this.button2 = new System.Windows.Forms.Button();
     this.tableLayoutPanel1.SuspendLayout();
     this.panel1.SuspendLayout();
     this.SuspendLayout();
     // 
     // tableLayoutPanel1
     // 
     this.tableLayoutPanel1.ColumnCount = 3;
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 200F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
      this.tableLayoutPanel1.Controls.Add(this.panel1, 1, 0);
      this.tableLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Fill;
      this.tableLayoutPanel1.Location = new System.Drawing.Point(0, 0);
      this.tableLayoutPanel1.Name = "tableLayoutPanel1";
      this.tableLayoutPanel1.RowCount = 1;
      this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
      this.tableLayoutPanel1.Size = new System.Drawing.Size(284, 262);
      this.tableLayoutPanel1.TabIndex = 0;
      // 
      // panel1
      // 
      this.panel1.Controls.Add(this.button2);
      this.panel1.Controls.Add(this.button1);
      this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;
      this.panel1.Location = new System.Drawing.Point(45, 3);
      this.panel1.Name = "panel1";
      this.panel1.Size = new System.Drawing.Size(194, 256);
      this.panel1.TabIndex = 0;
      // 
      // button1
      // 
      this.button1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
    | System.Windows.Forms.AnchorStyles.Right)));
    this.button1.Location = new System.Drawing.Point(3, 9);
    this.button1.Name = "button1";
    this.button1.Size = new System.Drawing.Size(188, 23);
    this.button1.TabIndex = 0;
    this.button1.Text = "button1";
    this.button1.UseVisualStyleBackColor = true;
    // 
    // button2
    // 
    this.button2.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
    | System.Windows.Forms.AnchorStyles.Right)));
    this.button2.Location = new System.Drawing.Point(3, 38);
    this.button2.Name = "button2";
    this.button2.Size = new System.Drawing.Size(188, 23);
    this.button2.TabIndex = 0;
    this.button2.Text = "button1";
    this.button2.UseVisualStyleBackColor = true;
    // 
    // TestForm11
    // 
    this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
    this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
    this.ClientSize = new System.Drawing.Size(284, 262);
    this.Controls.Add(this.tableLayoutPanel1);
    this.Name = "TestForm11";
    this.Text = "TestForm11";
    this.tableLayoutPanel1.ResumeLayout(false);
    this.panel1.ResumeLayout(false);
    this.ResumeLayout(false);

}

 #endregion

private System.Windows.Forms.TableLayoutPanel tableLayoutPanel1;
private System.Windows.Forms.Panel panel1;
private System.Windows.Forms.Button button2;
private System.Windows.Forms.Button button1;

希望这有帮助..

Answer 2

我会用TableLayoutPanel代替：

• 将 TableLayoutPanel 放在您的表单上
• 将停靠样式设置Fill为面板
• 在面板内只保留一列
• 为每个按钮创建行（并将按钮放入表格单元格）
• 设置行大小类型Autosize
• 为每个按钮设置停靠样式Fill，除了最后一个
• 将停靠样式设置Top为最后一个按钮

顺便说一句，在您的解决方案中，您应该迭代 flowLayoutPanel 控件而不是表单控件。还要考虑从宽度中减去水平边距和填充：

foreach (Control control in flowLayoutPanel.Controls)
{
    control.Size = new Size(flowLayoutPanel.Width - control.Margin.Horizontal,
                            control.Height); 
}

但我建议您改用 TableLayoutPanel。

Answer 3

我通过更改边距值解决了这个问题。我正在将我的内容添加到面板中。

C＃：

int horizontalMargin = (int)(0.5 * (this.containingPanelOrForm.Width - this.button.Width));
this.btnOptX.Margin = new Padding(horizontalMargin, 0, horizontalMargin, 0);

Answer 4

我不擅长 C#，但您也可以在 flowlayoutpanel 中添加一个与 flowlayoutpanel 宽度相同的面板。然后您可以在运行时创建的面板中添加您想要的按钮并将停靠栏设置为向左或向右。如你所愿。让我在 VB.net 和 C# 中展示一个示例（使用在线转换）

VB.net

     Dim btn As New Button
            btn.Text = "Example"
            btn.Name = "Button"
            btn.Size = New Size(60,10)
            Dim panel As New Panel
            panel.Size = New Size(FlowLayoutPanel1.Width, 10) 'size of the flowlayoutpanel + height of button
            btn.Dock = DockStyle.Right
            FlowLayoutPanel1.Controls.Add(panel)
panel.controls.add(btn)

C＃

Button btn = new Button();
btn.Text = "Example";
btn.Name = "Button";
btn.Size = new Size(60, 10);
Panel panel = new Panel();
panel.Size = new Size(FlowLayoutPanel1.Width, 10);
//size of the flowlayoutpanel + height of button
btn.Dock = DockStyle.Right;
FlowLayoutPanel1.Controls.Add(panel);
panel.controls.@add(btn);

Answer 5

或者您可以改用网格布局。

Answer 6

创建 Name = lblEmpty 和 AutoSize = False 的空标签。将此控件首先放在 FlowLayoutPanel1 中的控件列表中，然后在下面添加代码。

示例：假设 FlowLayoutPanel1 中存在三个标签，则结果应依次为 lblEmpty、LabelExisting1 和 LabelExisting2。

Dim MarginLabelEmpty As Integer = ((FlowLayoutPanel1.Width - (LabelExisting1.Width + LabelExisting2.Width)) / 2)
        lblEmpty.Width = MarginLabelEmpty

我通过创建此代码解决了我的问题。

在您使用按钮控件的情况下，使用.Text=""（空）创建4 个新标签，并将每个标签放在每个按钮的开头，命名标签如下：lblEmpty1、lblEmpty2、lblEmpty3、lblEmpty4。

然后添加以下代码：

Dim MarginLeftbtnOptAll As Integer = ((FlowLayoutPanel1.Width - btnOpt1.Width) / 2)
        lblEmpty1.AutoSize = False
        lblEmpty1.Width = MarginLeftbtnOptAll
        lblEmpty2.AutoSize = False
        lblEmpty2.Width = MarginLeftbtnOptAll
        lblEmpty3.AutoSize = False
        lblEmpty3.Width = MarginLeftbtnOptAll
        lblEmpty4.AutoSize = False
        lblEmpty4.Width = MarginLeftbtnOptAll

这个中心按钮，根据FlowLayoutPanel1的宽度增加空标签的宽度

Answer 7

将按钮直接扔到表单或面板（不是 FlowLayoutPanel），并Anchor = Top为所有按钮设置（仅顶部），它们不会居中，但在调整大小时将始终与表单（或容器）的边成比例地移动。

Answer 8

Private Sub FlowLayoutPanel1_SizeChanged(sender As Object, e As EventArgs)` Handles FlowLayoutPanel1.SizeChanged

        Dim TotalWidth As Integer = FlowLayoutPanel1.Controls.Count * button.Width
        Dim LeftPadding As Integer = (FlowLayoutPanel1.Width - TotalWidth) / 2
        Dim GapPadding As Integer = FlowLayoutPanel1.Controls.Count * 5

        If TotalWidth <= FlowLayoutPanel1.Width Then
            FlowLayoutPanel1.Padding = New Padding(LeftPadding - GapPadding, 0, 0, 0)
        End If

End Sub