Symfoware

Symfowareについての考察blog

C# FlowLayoutPanelでの配置ルールメモ

C#でコントロールを動的に配置する場合、FlowLayoutPanelを使うと便利そうです。
JavaのFlowLayoutと同じ感じでしょうか。


使い方を調べた時の内容をメモしておきます。


配置方向の指定



コントロールを配置する方向は、「FlowDirection」で指定します。

指定可能な値は、以下の4つ。


・FlowDirection.TopDown(上から下)
・FlowDirection.BottomUp(下から上)
・FlowDirection.LeftToRight(左から右)
・FlowDirection.RightToLeft(右から左)




以下のようなサンプルプログラムを作成し、各々の値を設定したときの
配置を見てみます。


using System;
using System.Windows.Forms;
using System.Drawing;

namespace testcodes
{
    class sample
    {
        [STAThread]
        public static void Main(String[] args)
        {
            Application.Run(new SampleForm());
        }
    }

    class SampleForm : Form
    {

        public SampleForm()
        {
            this.ClientSize = new Size(300, 200);
            FlowLayoutPanel flowPanel = new FlowLayoutPanel();
            flowPanel.Dock = DockStyle.Fill;

            //※ここで指定する値を変更すると、配置方向が変わる
            flowPanel.FlowDirection = FlowDirection.TopDown;
            flowPanel.AutoScroll = true;

            this.Controls.Add(flowPanel);

            for (int i = 1; i <= 15; i++)
            {
                Button button = new Button();
                button.Text = i.ToString();

                flowPanel.Controls.Add(button);
            }
        }
    }
}






FlowDirection.TopDown



FlowDirection.TopDownを指定したときはこんな感じになります。

35_001.png




FlowDirection.BottomUp



FlowDirection.BottomUpを指定したときはこんな感じになります。

35_002.png




FlowDirection.LeftToRight



FlowDirection.LeftToRightを指定したときはこんな感じになります。

35_003.png




FlowDirection.RightToLeft



FlowDirection.RightToLeftを指定したときはこんな感じになります。

35_004.png





コントロールの明示的な折り返し指定



明示的にコントロールを折り返して表示したい場合は、「SetFlowBreak」を使用します。

ここではまったのですが、コントロールを縦一列に配置したいと思い、
以下のコードを書きました。


using System;
using System.Windows.Forms;
using System.Drawing;

namespace testcodes
{
    class sample
    {
        [STAThread]
        public static void Main(String[] args)
        {
            Application.Run(new SampleForm());
        }
    }

    class SampleForm : Form
    {

        public SampleForm()
        {
            this.ClientSize = new Size(300, 200);
            FlowLayoutPanel flowPanel = new FlowLayoutPanel();
            flowPanel.Dock = DockStyle.Fill;

            //※上から下への配置を指定
            flowPanel.FlowDirection = FlowDirection.TopDown;
            flowPanel.AutoScroll = true;

            this.Controls.Add(flowPanel);

            for (int i = 1; i <= 15; i++)
            {
                Button button = new Button();
                button.Text = i.ToString();

                //※改行を明示的に指定
                flowPanel.SetFlowBreak(button, true);
                flowPanel.Controls.Add(button);
            }
        }
    }
}




実行すると、狙い通りにならず横一列にコントロールが配置されると思います。

35_005.png


これは、以下の図のような解釈が行われた結果の配置だと思っています。

35_006.png


そのため、コントロールの配置に「FlowDirection.TopDown」ではなく「FlowDirection.LeftToRight」を
指定することで、狙った動作が得られました。


using System;
using System.Windows.Forms;
using System.Drawing;

namespace testcodes
{
    class sample
    {
        [STAThread]
        public static void Main(String[] args)
        {
            Application.Run(new SampleForm());
        }
    }

    class SampleForm : Form
    {

        public SampleForm()
        {
            this.ClientSize = new Size(300, 200);
            FlowLayoutPanel flowPanel = new FlowLayoutPanel();
            flowPanel.Dock = DockStyle.Fill;

            //※左から右への配置を指定
            flowPanel.FlowDirection = FlowDirection.LeftToRight;
            flowPanel.AutoScroll = true;

            this.Controls.Add(flowPanel);

            for (int i = 1; i <= 15; i++)
            {
                Button button = new Button();
                button.Text = i.ToString();

                //※右に配置しようとすることろを毎回折り返す。
                flowPanel.SetFlowBreak(button, true);
                flowPanel.Controls.Add(button);
            }
        }
    }
}




35_007.png





レイアウトの停止、再開



レイアウトの実行を一旦停止するには「SuspendLayout」、停止したレイアウトを
再開するには「ResumeLayout」を使用します。

動的にコントロールを配置するとき、Addするたびにレイアウト処理を行っていると
実行速度が低下するため、追加前に「SuspendLayout」しておき、コントロールを
全て追加した後「ResumeLayout」してやります。

サンプルとして、画面起動時はレイアウトを行わず、ボタンを押したときに
レイアウトを実行するプログラムを作成しました。


using System;
using System.Windows.Forms;
using System.Drawing;

namespace testcodes
{
    class sample
    {
        [STAThread]
        public static void Main(String[] args)
        {
            Application.Run(new SampleForm());
        }
    }

    class SampleForm : Form
    {
        private FlowLayoutPanel flowPanel;

        public SampleForm()
        {
            this.ClientSize = new Size(300, 200);
            flowPanel = new FlowLayoutPanel();
            flowPanel.Bounds = new Rectangle(0, 0, 300, 175);

            //※左から右への配置を指定
            flowPanel.FlowDirection = FlowDirection.LeftToRight;
            flowPanel.AutoScroll = true;

            this.Controls.Add(flowPanel);

            //一旦、レイアウトを停止
            flowPanel.SuspendLayout();

            for (int i = 1; i <= 15; i++)
            {
                Button button = new Button();
                button.Text = i.ToString();
                flowPanel.Controls.Add(button);
            }

            Button doLayout = new Button();
            doLayout.Bounds = new Rectangle(0, 182, 50, 20);
            doLayout.Text = "配置";
            doLayout.Click += new EventHandler(doLayout_Click);
            this.Controls.Add(doLayout);
        }

        void doLayout_Click(object sender, EventArgs e)
        {
            flowPanel.ResumeLayout();
        }
    }
}





起動直後は、全てのボタンコントロールが重なっている状態です。

35_008.png


配置ボタンを押すと、レイアウトが実行されます。

35_009.png




関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2011/06/22(水) 22:47:46|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:2
  5. | 編集
<<SQL Server 2005アンインストール時に「WMI構成により、SQL Serverシステム構成チェッカーを実行できません。」 | ホーム | DataGridViewのDataSourceに指定できるオブジェクトについての考察>>

コメント

ポオカァア!!!
チュピチュピチュウ!!
  1. 2014/01/07(火) 16:35:55 |
  2. URL |
  3. #-
  4. [ 編集 ]

Re: タイトルなし

「ポオカァア」でGoogle検索したら、検索結果0件でした。
すごいです。
  1. 2014/01/07(火) 21:04:34 |
  2. URL |
  3. symfo #-
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/788-c7a611fc
この記事にトラックバックする(FC2ブログユーザー)