Panel

[C#] Panelレイアウトの基本と応用

2025-01-18更新日: 2025-01-18

C#のPanelは、Windows Formsアプリケーションで使用されるコンテナコントロールで、他のコントロールをグループ化し、レイアウトを管理するために利用されます。

基本的な使い方として、Panelにボタンやラベルなどのコントロールを追加し、位置やサイズを調整することで、UIの一部をまとめて管理できます。

応用として、Panelをスクロール可能にしたり、動的にコントロールを追加・削除することで、柔軟なレイアウトを実現できます。

また、Panelを複数組み合わせて複雑なUIを構築することも可能です。

Panelのプロパティを活用することで、レスポンシブなデザインやカスタムレイアウトを実現できます。

目次から探す

Panelのレイアウト管理
Panelの応用例
Panelのカスタマイズ
まとめ

Panelのレイアウト管理

Windowsフォームアプリケーションにおいて、Panelは非常に重要な役割を果たします。

Panelを使用することで、コントロールの配置やレイアウトを効率的に管理できます。

ここでは、FlowLayoutPanelやTableLayoutPanelの利用方法、DockとAnchorプロパティの活用、自動サイズ調整の設定について詳しく解説します。

FlowLayoutPanelの利用

FlowLayoutPanelは、コントロールを自動的に並べて配置するためのコンテナです。

コントロールを追加すると、指定した方向に順番に配置されます。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // FlowLayoutPanelの作成
        FlowLayoutPanel flowLayoutPanel = new FlowLayoutPanel();
        flowLayoutPanel.Dock = DockStyle.Fill; // フォーム全体に広がるように設定
        // ボタンを追加
        for (int i = 0; i < 5; i++)
        {
            Button button = new Button();
            button.Text = $"ボタン {i + 1}";
            flowLayoutPanel.Controls.Add(button);
        }
        this.Controls.Add(flowLayoutPanel);
    }
}

ボタンが横一列に並んで表示されます。フォームのサイズを変更すると、ボタンの配置が自動的に調整されます。

TableLayoutPanelの利用

TableLayoutPanelは、行と列のグリッドにコントロールを配置するためのコンテナです。

各セルにコントロールを配置でき、レイアウトを細かく制御できます。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // TableLayoutPanelの作成
        TableLayoutPanel tableLayoutPanel = new TableLayoutPanel();
        tableLayoutPanel.RowCount = 2;
        tableLayoutPanel.ColumnCount = 2;
        tableLayoutPanel.Dock = DockStyle.Fill;
        // ボタンを追加
        for (int i = 0; i < 4; i++)
        {
            Button button = new Button();
            button.Text = $"ボタン {i + 1}";
            tableLayoutPanel.Controls.Add(button, i % 2, i / 2);
        }
        this.Controls.Add(tableLayoutPanel);
    }
}

2×2のグリッドにボタンが配置されます。各ボタンはセルに収まるようにサイズが調整されます。

DockとAnchorプロパティの活用

DockとAnchorプロパティを使用すると、コントロールの位置とサイズを親コンテナに対して動的に調整できます。

Dockプロパティ: コントロールを親コンテナの特定の辺に固定します。
Anchorプロパティ: コントロールの位置を親コンテナの特定の辺に固定し、サイズを調整します。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ボタンの作成
        Button button = new Button();
        button.Text = "固定ボタン";
        button.Dock = DockStyle.Bottom; // フォームの下部に固定
        // テキストボックスの作成
        TextBox textBox = new TextBox();
        textBox.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right; // 上と左右に固定
        this.Controls.Add(button);
        this.Controls.Add(textBox);
    }
}

ボタンはフォームの下部に固定され、テキストボックスは上部に配置され、フォームの幅に合わせてサイズが調整されます。

自動サイズ調整の設定

自動サイズ調整を設定することで、コントロールが親コンテナのサイズ変更に応じて自動的にサイズを調整します。

これにより、ユーザーインターフェースの一貫性を保つことができます。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // ラベルの作成
        Label label = new Label();
        label.Text = "自動サイズ調整ラベル";
        label.AutoSize = true; // 自動サイズ調整を有効にする
        this.Controls.Add(label);
    }
}

ラベルのテキストが変更されると、ラベルのサイズも自動的に調整されます。

これらの機能を活用することで、Windowsフォームアプリケーションのレイアウトを柔軟に管理できます。

Panelの応用例

Panelは、基本的なレイアウト管理だけでなく、さまざまな応用が可能です。

ここでは、スクロール可能なPanelの作成、動的にコントロールを追加する方法、複数のPanelを組み合わせた複雑なレイアウト、そしてPanelを用いたレスポンシブデザインについて解説します。

スクロール可能なPanelの作成

スクロール可能なPanelを作成するには、AutoScrollプロパティを利用します。

これにより、Panel内のコントロールがPanelのサイズを超える場合にスクロールバーが表示されます。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // スクロール可能なPanelの作成
        Panel scrollablePanel = new Panel();
        scrollablePanel.AutoScroll = true; // スクロールを有効にする
        scrollablePanel.Size = new System.Drawing.Size(200, 200);
        // 多数のボタンを追加
        for (int i = 0; i < 10; i++)
        {
            Button button = new Button();
            button.Text = $"ボタン {i + 1}";
            button.Location = new System.Drawing.Point(10, i * 30);
            scrollablePanel.Controls.Add(button);
        }
        this.Controls.Add(scrollablePanel);
    }
}

Panel内に10個のボタンが縦に並び、Panelのサイズを超える部分にスクロールバーが表示されます。

動的にコントロールを追加する方法

動的にコントロールを追加することで、ユーザーの操作に応じてインターフェースを変更できます。

以下の例では、ボタンをクリックするたびに新しいラベルを追加します。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
	private Panel dynamicPanel;
	public MyForm()
	{
		InitializeComponent();
		// 動的にコントロールを追加するPanelの作成
		dynamicPanel = new Panel();
		dynamicPanel.Dock = DockStyle.Fill;
		// ボタンの作成
		Button addButton = new Button();
		addButton.Text = "ラベルを追加";
		addButton.Click += AddButton_Click;
		this.Controls.Add(dynamicPanel);
		dynamicPanel.Controls.Add(addButton);
	}
	private void AddButton_Click(object sender, EventArgs e)
	{
		Label newLabel = new Label();
		newLabel.Text = $"ラベル {dynamicPanel.Controls.Count + 1}";
		newLabel.Location = new System.Drawing.Point(10, dynamicPanel.Controls.Count * 30);
		dynamicPanel.Controls.Add(newLabel);
	}
}

「ラベルを追加」ボタンをクリックするたびに、新しいラベルがPanel内に追加されます。

複数のPanelを組み合わせた複雑なレイアウト

複数のPanelを組み合わせることで、複雑なレイアウトを実現できます。

以下の例では、2つのPanelを使用して、左側にメニュー、右側にコンテンツを表示します。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // 左側のメニューパネル
        Panel menuPanel = new Panel();
        menuPanel.Dock = DockStyle.Left;
        menuPanel.Width = 100;
        menuPanel.BackColor = System.Drawing.Color.LightGray;
        // 右側のコンテンツパネル
        Panel contentPanel = new Panel();
        contentPanel.Dock = DockStyle.Fill;
        contentPanel.BackColor = System.Drawing.Color.White;
        // メニューボタンを追加
        for (int i = 0; i < 3; i++)
        {
            Button menuButton = new Button();
            menuButton.Text = $"メニュー {i + 1}";
            menuButton.Dock = DockStyle.Top;
            menuPanel.Controls.Add(menuButton);
        }
        this.Controls.Add(contentPanel);
        this.Controls.Add(menuPanel);
    }
}

左側にメニューパネル、右側にコンテンツパネルが表示され、メニューボタンが縦に並びます。

Panelを用いたレスポンシブデザイン

Panelを用いたレスポンシブデザインでは、フォームのサイズ変更に応じてコントロールの配置やサイズを動的に調整します。

以下の例では、フォームのサイズに応じてボタンの配置を変更します。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private FlowLayoutPanel responsivePanel;
    public MyForm()
    {
        InitializeComponent();
        // レスポンシブデザイン用のFlowLayoutPanel
        responsivePanel = new FlowLayoutPanel();
        responsivePanel.Dock = DockStyle.Fill;
        responsivePanel.WrapContents = true; // コンテンツを折り返す
        // ボタンを追加
        for (int i = 0; i < 5; i++)
        {
            Button button = new Button();
            button.Text = $"ボタン {i + 1}";
            responsivePanel.Controls.Add(button);
        }
        this.Controls.Add(responsivePanel);
    }
}

フォームの幅を変更すると、ボタンの配置が自動的に調整され、折り返されます。

これらの応用例を活用することで、より柔軟でインタラクティブなユーザーインターフェースを構築できます。

Panelのカスタマイズ

Panelは、デフォルトの機能だけでなく、カスタマイズすることでさらに多様な用途に対応できます。

ここでは、カスタム描画の実装、Panelの継承と拡張、イベントハンドリングのカスタマイズについて解説します。

カスタム描画の実装

Panelにカスタム描画を実装することで、独自のデザインやグラフィックを表示できます。

Paintイベントをオーバーライドして、カスタム描画を行います。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // カスタム描画Panelの作成
        CustomPanel customPanel = new CustomPanel();
        customPanel.Dock = DockStyle.Fill;
        this.Controls.Add(customPanel);
    }
}
public class CustomPanel : Panel
{
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        // カスタム描画の実装
        Graphics g = e.Graphics;
        g.FillRectangle(Brushes.LightBlue, this.ClientRectangle); // 背景を塗りつぶす
        g.DrawEllipse(Pens.Red, 10, 10, 100, 100); // 赤い円を描画
    }
}

Panelの背景が水色に塗りつぶされ、左上に赤い円が描画されます。

Panelの継承と拡張

Panelを継承して新しい機能を追加することで、特定の用途に応じたカスタムコントロールを作成できます。

以下の例では、クリックされた回数を表示するカスタムPanelを作成します。

using System;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // カスタムPanelの作成
        ClickablePanel clickablePanel = new ClickablePanel();
        clickablePanel.Dock = DockStyle.Fill;
        this.Controls.Add(clickablePanel);
    }
}
public class ClickablePanel : Panel
{
    private int clickCount = 0;
    public ClickablePanel()
    {
        this.Click += ClickablePanel_Click;
    }
    private void ClickablePanel_Click(object sender, EventArgs e)
    {
        clickCount++;
        this.Invalidate(); // 再描画を要求
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        // クリック回数を描画
        e.Graphics.DrawString($"クリック回数: {clickCount}", this.Font, Brushes.Black, new PointF(10, 10));
    }
}

Panelをクリックするたびに、クリック回数が更新されて表示されます。

イベントハンドリングのカスタマイズ

Panelのイベントハンドリングをカスタマイズすることで、特定のイベントに対する動作を変更できます。

以下の例では、マウスがPanel上に入ったときに背景色を変更します。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        // イベントハンドリングをカスタマイズしたPanelの作成
        EventHandlingPanel eventHandlingPanel = new EventHandlingPanel();
        eventHandlingPanel.Dock = DockStyle.Fill;
        this.Controls.Add(eventHandlingPanel);
    }
}
public class EventHandlingPanel : Panel
{
    public EventHandlingPanel()
    {
        this.MouseEnter += EventHandlingPanel_MouseEnter;
        this.MouseLeave += EventHandlingPanel_MouseLeave;
    }
    private void EventHandlingPanel_MouseEnter(object sender, EventArgs e)
    {
        this.BackColor = Color.LightGreen; // マウスが入ったときの背景色
    }
    private void EventHandlingPanel_MouseLeave(object sender, EventArgs e)
    {
        this.BackColor = SystemColors.Control; // マウスが離れたときの背景色
    }
}