c# - コントロールをFlowLayoutの中央に揃えます

Question

私は次のようなフローレイアウトを持っています：

すべてのコントロールをフォームの中央に配置する必要があります（つまり、フォームの幅が200であるとします。btnOpt1からbtnOpt4は、 0Leftではなく100からボタン幅の半分を引いたものから開始する必要があります。 ）

Answer 1

あなたはそれを2つの方法で行うことができますが、それぞれにいくつかの制限があります。

1. Anchorプロパティの使用
2. 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.レイアウトコントロールの使用

1. TableLayoutコントロールを追加し、そのDockプロパティをFillに設定します。
2. サイズタイプスタイルパーセント100％で1行を追加
3. 3列を追加しますColumn1（サイズタイプ–パーセント（100％））、Column2（サイズタイプ–絶対（200px））、列3（サイズタイプ–パーセント（100％））。
4. 次に、Panel Controlを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をパネルに設定
• パネル内に1列だけ残します
• すべてのボタンの行を作成します（そしてボタンをテーブルセルに配置します）
• 行サイズタイプを設定する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

または、代わりにグリッドレイアウトを使用できます。

Answer 5

私は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 6

Name=lblEmptyおよびAutoSize=Falseで空のラベルを作成します。このコントロールを最初にFlowLayoutPanel1のコントロールリストに配置し、次に以下のコードを追加します。

例：FlowLayoutPanel1に3つの既存のラベルがあるとすると、結果は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それらすべてに設定（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