Выравнивание элементов управления в центре FlowLayout

У меня есть flowlayout следующим образом:

enter image description here

Мне нужно сосредоточить все элементы управления на форме (другими словами, пусть ширина формы равна 200. btnOpt1 to btnOpt4 должен иметь свои Left начиная с 100 минус половину ширины кнопки, не 0.)

Ответ 1

Вы можете сделать это двумя способами, но с некоторым ограничением каждого из них.

  • Использование свойства Anchor
  • Использование управления компоновкой с помощью свойств Docking и Anchor.

Метод 1: Якорное свойство

Элементы управления привязаны по умолчанию к левому верхнему углу формы, которая означает, что размер формы будет изменен, их расстояние от вершины левая часть формы останется постоянной. Если вы измените контроль привязка к левому нижнему краю, тогда управление будет поддерживать одинаковое расстояние из нижней и левой сторон формы, когда форма при изменении размеров.

Отключение якоря в направлении приведет к тому, что управление будет сосредоточено в это направление при изменении размера.

Пример:

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. Использование управления компоновкой

  • Добавить элемент управления TableLayout, установить его свойство Dock для заполнения.
  • Добавить 1 строку с размером Тип Тип Процент 100%
  • Добавить 3 столбца Column1 (Тип размера - процент (100%)), Column2 (Тип размера - Абсолютный (200 пикселей)), Column3 (Тип размера - Процент (100%)).
  • Теперь добавьте элемент управления панелью в столбец2 и установите его свойство Dock для заполнения
  • Добавьте кнопки для этого элемента управления и установите их размер по своему усмотрению и установите Свойство привязки для 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;

Надеюсь на эту помощь.

Ответ 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.

Ответ 3

Я решил это, изменив значения полей. Я добавляю свой контент к панели, хотя.

С#

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

Ответ 4

Или вы можете использовать компоновку сетки вместо этого.

Ответ 5

Я не очень хорош в С#, но вы также можете добавить панель в flowlayoutpanel с той же шириной flowlayoutpanel. Затем вы можете добавить в панель, созданную во время выполнения кнопку, которую вы хотите, и установить док влево или вправо. Как хотите. Позвольте мне показать пример в VB.net и С# (используется онлайн-конвертирует)

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)

С#

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);
[email protected](btn);

Ответ 6

Создать пустую метку с именем = lblEmpty и AutoSize = False. Поместите этот элемент управления сначала в список управления в FlowLayoutPanel1, затем добавьте код ниже.

Пример. Предполагая три существующих метки в FlowLayoutPanel1, результат должен быть lblEmpty, LabelExisting1 и LabelExisting2 в этом порядке.

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

Я решил проблему, создав этот код.

в вашем случае с Button Controls, создайте 4 новые метки с .Text = "" (empty) и поместите каждый начало каждой кнопки, обозначение ярлыков следующим образом: 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

Ответ 7

Бросая кнопки непосредственно на форму или панель (не FlowLayoutPanel) и устанавливая Anchor = Top (только Top) для всех них, они не будут центрированы, но всегда будут перемещаться пропорционально сторонам формы (или контейнера) при изменении размера ,