FlowLayoutPanelを利用したコントロールの動的生成と動的な配置 - C#

FlowLayoutPanelを利用したコントロールの動的生成と動的な配置について紹介します。

概要

こちらの記事では、プログラムコードによる動的なウィンドウコントロールの生成について紹介しました。生成されるコントロールが複数になる場合、先の記事で紹介した方法では、すべてのコントロールに座標値を設定する必要があり、処理が煩雑になります。この記事では、FlowLayoutPanelを利用して、明示的に座標を指定しなくても、動的に生成したコントロールが適切に配置される処理を紹介します。

従来の生成方法での問題 (FlowLayoutPanelを利用しない場合)

従来の生成方法でどういった動作になるか確認します。
Windows Formアプリケーションを作成します。

UI

下図のフォームを作成します。ButtonとPanelを配置します。

コード

下記のコードを記述します。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace CreateControl
{
  public partial class FormFlowLayoutPanel : Form
  {
    public FormFlowLayoutPanel()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      for (int i = 0; i < 12; i++) {
        TextBox tb = new TextBox();
        panel1.Controls.Add(tb);
      }
    }
  }
}

解説

forループにより、12個のテキストボックスを動的に作成してpanel1内に配置します。

実行結果

プロジェクトを実行します。下図のフォームが表示されます。


[button1]をクリックします。panel1にTextBoxが表示されます。12個作成したのですが、画面には1つしか表示されていないように見えます。これは生成したTextBox12個の座標がすべて同じ座標になっており、重なっているためテキストボックスが1つしか見えない状態になっています。テキスボックスを正しく表示させるには、生成したテキストボックスのTop, Left プロパティに座標値を代入し、テキストボックスが重ならないように配置する必要があります。

FlowLayoutPanelを利用した動的な配置

FlowLayoutPanelを利用すると、コントロールの座標値を設定せずに生成したコントロールを整列できます。
Windows Formアプリケーションを作成します。

UI

下図のUIを作成します。フォームにButton, FlowLayoutPanelを配置します。

コード

下記のコードを記述します。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace CreateControl
{
  public partial class FormFlowLayoutPanel : Form
  {
    public FormFlowLayoutPanel()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      for (int i = 0; i < 12; i++) {
        TextBox tb = new TextBox();
        flowLayoutPanel1.Controls.Add(tb);
      }
    }
  }
}

解説

forループにより、12個のテキストボックスを動的に作成してflowLayoutPanel1内に配置します。

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。


[button1]をクリックします。下図の画面に変わります。FlowLayoutPanelにテキストボックスが12個配置されたことが確認できます。生成された個々のTextBoxのTop, Leftプロパティを設定していませんが、TextBoxは整列して配置され、テキストボックス間の余白も取られていることが確認できます。